Vojtěch Bulant [gwh] › Chyba a:hover v IE

Chyba a:hover v IE – jednoduché řešení

Neděle 18. 2. 2007, 6.01 ~ tagy: kódování, css, internet explorer ~ trvalý odkaz

Při tvorbě horizontálního menu se často používá seznam odkazů, kdy se jednotlivé položky seznamu nechají „plavat“. Ovšem pozor na to!

Mějme jednoduché menu jako seznam:

<ul>
    <li><a href="#">odkaz</a></li>
    <li><a href="#">odkaz</a></li>
    <li><a href="#">odkaz</a></li>
    <li><a href="#">odkaz</a></li>
</ul>

Menu naformátujeme tímto stylopisem:

li{ float: left; display: inline; }
a{ display: block; padding: 20px; margin: 0 5px; background: #ccc; }
a:hover{ background: #999; }

Nebo se podívejte na připravený příklad.

A máme jednoduché horizontální menu. Zkuste si ho otestovat v IE 6, 5.5 nebo 5. Jak vidíte, hover efekt se aktivuje až po najetí na text odkazu, nikoli po najetí kamkoli na oblast odkazu. Jinými slovy: IE sice padding odkazu vykreslí, ale z nějakých důvodů ho nechápe jako jeho součást.

Jak na to?

Jednoduše. Upravíme stylopis (místo položky seznamu necháme „plavat“ samotný odkaz):

li{ display: inline; }
a{ float: left; display: block; padding: 20px; margin: 0 5px; background: #ccc; }
a:hover{ background: #999; }

Připravený příklad

A vidíme, že už je vše v pořádku.

Je možné, že jsem objevil Ameriku, ale snad řešení nikoho neurazí a poslouží zadost.

přidat do del.icio.us ~ přidat do Linkuj.cz

16 komentářů

RSS komentářů ke článku

Mrazík 18. 2. 2007, 13.35 #

Každý musíme tu Ameriku někdy objevit, ne?
Dero 18. 2. 2007, 14.08 #

Ano, tohle je základní technika, ale když si na ten fígl přijde každý sám, má to větší hodnotu, než kdyby sis to někde přečetl. Zkus třeba tomu odkazu zadat zoom: 1 – mělo by to fungovat stejně.
Ivo Toman 18. 2. 2007, 14.19 #

To zná skoro každý, nicméně Dero mě tím zoomem skutečně překvapil. Kdo se ještě přimlouvá o to, aby Dero psal více o kodéřině?
Ošklivý sup 18. 2. 2007, 14.31 #

Většinu zajímavých informací najdete na každém blogu známějších blogerů. A ty to ani nevymysleli sami, jen odkoukali. Není důvod, abych nemohl psát něco, co už někde někdo napsal. Hlavně kvůli tomu že nemám čas hledat jestli už to někdo napsal

a hlavně čím více lidí o tom bude psát, tím více lidí se danou informaci dozví (nebo aspoň snáze). Neboť evidentně aktuální množství nestačilo aby se to autor dozvěděl
numero 18. 2. 2007, 17.35 #

2Mrazík: Škoda jen, že já objevuji jen Ameriku
Kaderas 18. 2. 2007, 21.01 #

Spokojeně musím konstatovat, že s tím nemá problémy ani konqueror
Tomáš Halada 18. 2. 2007, 22.08 #

Nepomůže taky zadání pevné šířky odkazu? (samozřejmě vhodné třeba v menu kde jsou odkazy pod sebou)
Zdeněk Košťál 18. 2. 2007, 22.14 #

Alternativa je to řešit dvěma řádky přímo u li:
float: left;
position: relative;

Tento problém mě tak ještě nepotkal.
gwh 18. 2. 2007, 22.35 #

Tomáš Halada: Ano, v tom případě pomůže.

Dero: Zoom funguje (je potřeba ještě přidat šířku), díky.
myf 19. 2. 2007, 1.35 #

když jsme u těch objevů ? (mimochodem nic tak nepotěší lamu jako přečíst si na profiblogu informaci, kterou už má sama lama ‚v malíku‘ :] )

? nedávno jsem natrefil na podobné „notoricky známé“ řešení, které mě překvapilo jak samo o sobě, tak i tím, že jsem se s ním, kam až má paměť sahá, nikdy nesetkal (neříkám, že mám kdovíjak dalekosáhlou paměť).

Jedná se o starý dobrý „problém“ jak roztáhnout container floatů podle výšky oněch vnořených floatů (v kontextu uvedeného příkladu by to bylo asi znělo "kterak přimět UL k tomu, aby byl stejně vysoký jako nejvyšší LI (respektive li > a do něj vnořený): zkuste v příkladu podbarvit třeba ul { background-color: red; }.

Řešení, které mě tak překvapilo, zní, volně převyprávěno: ul { overflow: auto; }. Narazil jsem na něj zde (asi nejhumornější článek o CSS, který jsem kdy četl), kamž jsem zabrouzdal jen díky jistému ‚PPK‘, který se podivil nad statistikou jeho nejnavštěvovanějších stránek.

No řekněte, používáte to někdo? Víte o někom, kdo to používá? Já jsem letmo projyxil české luhy a háje a narazil pouze na kohosi, kdo na to víceméně náhodou natrefil, když dštil oheň a síru na Gecko, ale v „oficiálních“ zinech a diskusích je ticho po pěšině (nebo jenom já nic neslyším?). Asi mám jenom smůlu a zatím jsem v téhle konkrétní Americe ještě nenarazil na „naše“ osadníky, ale i tak to stojí za pozornost?
gwh 19. 2. 2007, 13.01 #

Myf: Díky za postřeh, gecko a opera to bere, IE jsem ale ke spolupráci nepřinutil, tam je potřeba rušit obtékání pomocí clear.
myf 19. 2. 2007, 14.05 #

? ani s tím width: 100%, jak píše ppk?
Zdeněk Košťál 19. 2. 2007, 15.51 #
Omlouvám se, ale v předchozím příspěvku jsem zapomněl na jeden důležitý řádek, výsledná definice tedy zní takto:
```
li {
display: block;
float: left;
position: relative;
}
```
Bohužel jsem tuto konstrukci nevymyslel já, problémy jsem s ní nikdy neměl. Deklarace position spolu s float zajistí, že se neodřádkuje (ačkoli se jedná o blokový element).

Myf: Velmi elegantní řešení, já doteď používat height s nastavenou výškou em. Zobrazí se to tak dobře při různých velikostech písma, ale delší titulky, které se zvětší, mohou dělat neplechu.
gwh 19. 2. 2007, 19.42 #

Myf: Jé, na to jsem se nedíval. S definovanou šířkou to funguje, díky za link, je to super objev. Znám ještě jedno podobné řešení – nastavit rodičovskému prvku také float. Ale to s sebou někdy přináší problémy. Tohle nové řešení vypadá mnohem lépe, ještě to otestovat v praxi. Potom by si zasloužilo víc propagovat, vypadá to, že se o něm u nás zatím moc neví.
Ján Varhol 1. 3. 2007, 8.38 #

Vďaka za pomoc. V poslednom čase som práve toto riešil, ale „prečítal som si ťa“ skôr, ako by som na to sám prišiel. Ešte raz vďaka.
Jirka 3. 3. 2007, 13.23 #

Ano, i ja se divim, ze figl s „overflow: hidden“ skoro nikdo (alespon podle reakci v ruznych forech, atd.) nezna. Je to skvela alternative ke „clear: both“ a neni potreba zadny specialni prvek s touto vlastnosti.

Sam toto pouzivam napr. pri 3 col layoutu, kde potrebuju mit podbarvene sloupce az dolu. Rodicovskemu blogu pridam „overflow: hidden“ a nesmi se zapomenout definovat sirka! Pak dovnitr vlozim tri plovouci bloky s „float: left“ a je vystarano, rodicovsky blok se ukonci az po nimi

K videni treba na http://www.mysteryshoppers.cz/

Přidat komentář

Povinný je pouze text komentáře. Vyplňujte ale prosím, pokud možno, všechny údaje. E-mail nebude zobrazen.

Byl bych potěšen, kdybyste psali s diakritikou.

« Pevné versus variabilní rozměry elementů Typografie – členění textu »

Vojtěch Bulant [gwh] tady kdysi něco bylo… :)

Chyba a:hover v IE – jednoduché řešení

Jak na to?

16 komentářů

Přidat komentář

Vojtěch Bulant [gwh]
tady kdysi něco bylo… :)