Robím grafický návrh, ktorý obsahuje vertikálne menu s vysúvacími subpoložkami a samozrejme je riešené pomocou CSS. Veľký problém CSS menu je v tom, že sa okamžite skryjú, pokiaľ sa myš dostane mimo elementu. Je teda potrebné túto aktívnu oblasť zväčšiť. Oblasť je však potrebné zväčšiť tak, že ju nebude vidieť a nebude zakrývať obsah.
Menu je klasicky riešené pomocou <ul>
a subpoložky sú
absolútne poziciované v rámci rodičovského <li>
. Ako
teda zväčšíme aktívnu oblasť? Zväčšíme okraje
<ul>
pomocou padding
.
#menu li {
position: relative;
}
#menu li ul {
display: none;
position: absolute;
left: -10px;
padding: 5px 10px 20px; /* z bokov 10px a z dola 20px oblasť */
background: transparent; /* oblasť musí presvitať */
}
#menu li:hover ul {
display: block;
}
#menu li ul li {
background: white; /* subpoložky nebudú presvitať */
}
Spásna myšlienka, ale treba to ešte odladiť pre IE. Kde je problém? Ak
<ul>
má transparentné pozadie (čo je princíp funkčnosti
aktívneho okraja – nesmi byť vidieť), môžeme mu zväčšovať padding
koľko len chceme, IE zruší :hover
okamžite, ako sa myš dostane
mimo vnútornú oblasť prvku (oblasť medzi paddingom.
IE našťastie „rozšíri oblasť“, pokiaľ je nastavená ľubovoľná farba pozadia. Okrem priesvitnosti… Mal som chybný nápad – nastaviť farbu pozadia a použiť transparentný GIF. Obrázok je však aplikovaný nad farebnou výplňou, teda stále bolo oblasť vidieť.
Posledný výstrel do vzduchu: transparentné pozadie s nastaveným prehliadným obrázkom. Heuréka!!! V IE je aktívna oblasť priesvitná!
Výsledný kód pre IE:
#menu li ul {
background: transparent url("/images/blank.gif");
}
Toto bolo riešenie chyby v IE s obtiažnosťou 1. Odstránenie
ďalšej chyby v najrozšírenejšom a najhoršom prehliadači Microsoft
Internet Explorer trvalo 20 minút. (Okrem pozadia som skúšal
kombinovať margin/padding na <ul>
, <li>
a
ďalšie iné triky.) Na záver článku sa chcem poďakovať veľkému bratovi
z Redmontu, že vďaka jeho neschopnosti zvyšuje náklady na vývoj webových
stránok. A už sa teším na ďalšie chyby, ktoré bude treba odlaďovať
celý víkend >:o.