IE6 alatt átlátszó menü

Talán az utóbbi egy év legnagyobb IE6 szívását értem meg (Kell az IE6, megrendelők még mindig imádják). Mindig is lélegzetvisszafolytva, izzadva lesem meg az elkészített oldalt eme nemes termék alatt. Most sem volt másképp, de örömmel konstatáltam, hogy egy-két különbség kivételével az egész layout megmaradt. A floatolt design helyett ezúttal pozicionálnom kellett, ugyanis a design olyan szinten volt layerezve (egymáson voltak elemek, egybefolytak) volt, hogy nehezebb lett volna pixelpontosra kivagdosni őket. A relatív pozicionált designt egész jól tolerálja az IE6, szóval nem voltam teljesen elkeseredve, viszont a z-index és a transzparens png hátterek kezelése nem igazán erőssége a böngészőnek, szóval volt egy hosszú ideig tartó harcom vele.

Adott volt a feladat: olyan menüt készíteni Joomla alá, ami képekből épül fel, külön kép jeleníti meg az aktív menüt illetve a hovert. Neki is kezdtem.

A terjedelemre való tekintettel az alábbi cikk nem tartalmaz minden információt a megértéshez, megkövetel némi webfejlesztéssel kapcsolatod tudást illetve HTML, CSS tapasztalatot.

Joomla menü képként

Egy Joomla 1.5 natív menü struktúrája a következő : ul > i -> a -> span. Régebben is csináltam már hasonlót, de ott nem kellett hover és aktív menü plusszban. A lista elem (li) tartalmazta a képet, a linket (a) elem szövegét meg eltüntettem opacity-vel az érdeklődő szemek elől, attól még ugyanúgy kattintható. Az alábbi css kód nagyszerűen meg is birkózik a feladattal:

 
#menu li a { 
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
display: block;
width: 100%;
height: 100%;
}

Milyen egyszerűnek tűnik... hát nem az, ugyanis az IE böngészőkből kispórolták ezt a featuret. Kondicionális kommenttel behozott css fájlba (ie6+) ezt kell írni és az MS böngészők rögtön meggyógyulnak:

 
#menu li a {
zoom: 1; /* hasLayout hack */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: alpha(opacity = 0); /* IE6, IE7 */
}

Remek!

Joomla menü képként - továbbfejlesztve

A mostani feladat annyiban különbözött, hogy transzparens PNG fájlokkal kell dolgozni, kell hover és aktív menü, CSS preload (mert praktikus) és maga a menü is egy transzparens PNG-n helyezkedik el, ami z-indexelt. Nagyon finom. Úgy döntöttem, hogy az A fogja tartalmazni a fő képet, így IE6 alatt megjelenik a hover (IE6 csak az A elemeken támogatja a hover pseudo osztályt), a benne levő SPAN elem pedig a CSS preloaded képeket, marginnal eltolva az űrbe.

IE6 sajnos annyira őskor, hogy nem igazán támogatja alapból az átlátszó képeket, egy külön filtert kell rá alkalmazni. Miután a fenti megoldást alkalmaztam, gondoltam magamban, hogy csak le kell futtatnom a PNG konvertáló javascript függvényt és minden jó lesz. (Olyan js tool, ami végigmegy az összes PNG fájlon, css hátteren és meggyógyítja azt) Meg is tettem ezt, és azt tapasztaltam, hogy IE6 alatt nem kattintható semmilyen menü, ráadásul a három PNG fájl  a/2, span/1) egymáson helyezkedik el. Nem örültem.

Később visszagondolva NÉGY hiba összefonódása okozta ezt a rendellenes működést.

IE6 multi class Bug/Non-feature

IE6 nem támogatja az elemekhez több css class hozzárendelését, így az én próbálkozásom, hogy az éppeni aktív elem legyen más (li.item1.active) kudarcba fulladt, ugyanis csak az utolsó class-t ismeri fel. Így az lett az eredménye a dolognak, hogy az aktív menüpontra rárakta az utolsó menüpont hátterét. (végigment az összesen és az utolsó maradt, mint .active osztály, így hozzárendelte azt az aktív menüponthoz) Ezt javítottam úgy, hogy megcseréltem a classokat a selectorban (li.activ.item1), így egyszerűen IE6 kétszer rendeli hozzá a hátteret. Probléma megoldva!

AlphaImageLoader Bug!?

Az átlátszó PNG-ket meg lehet javítani az alábbi sorral IE6 alatt:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='abszolút út', sizingMethod='crop');

Nem a spacer.gif hacket alkalmazom, mert az egyszerűen nem működött nekem, így gyorsan feladtam a próbálkozást.

Az én javascriptem is ezt csinálja, általában működik is, de jelen esetben a hover eseményre előkészített PNG fájlokkal meggyűlt a baja, ugyanis a script teljesen kitörli a hátteret és az megszűnik létezni, nem is lesz eltolva marginnal, ergo ott marad a helyén! Ráadásul semlegesíti az előzőleg olyan boldogan beállított opacity tulajdonságot. Ez totális kudarc. Nem szabad futtatni a js scriptet, esetleg szerkeszthetem, hogy a SPAN mezőket ne nézze, de ez olyan csúnya megoldás. Úgy döntöttem nem használom a scriptet, hanem csak az A, és az A:hover elemeket erőszakolom meg az AlphaImageLoader filterrel. Probléma megoldva!

IE6 transparent PNG background links Double Bug

Ez is egy érdekes IE6 probléma. Ha egy előzőleg AlphaImageLoader segítségével helyrehozott elembe linkeket helyezünk, azokat nem lehet kattintani! (Illetve ez nem teljesen igaz, mert lehet elvétve pixeleket találni, ahol igen.) Mivel nálam egy menüről van szó és említettem hogy a háttere is átlátszó, ezt a megoldást kellett alkalmaznom. A workaround az, hogy pozicionáljuk a linkjeinket, ez nagyon sok helyen le van írva (google), meg is tettem ezt (= position: relative;) , DE még mindig nem működött. Tovább keresgettem és kiderült, hogy ha a tartalmazó elem pozicionált, akkor ez a megoldás semmit nem ér. Úgy lehet ezt a hibát kikerülni, hogy beteszünk a konténer elem és a linkek közé egy NEM pozicionált elemet és annak nyomjuk le a torkán az átlátszó PNG-t, a külső elem meg lehet pozicionált. A dologról bővebb infó ill. példák ITT. Nos, probléma megoldva!

Még egy probléma

Egy apró hiba maradt. IE6 alatt a linkek hátterének NEM transzparens része felett kéz helyett mutató van. Az általános IE6 cursor restore hack nem működött az Alpha filterek használata után. Az opacity beállítása után vissza kell állítani a kezet az egér kurzorának. (= cursor: hand). Szerintem a span a ludas, de erre nem lehet IE6 alatt :hover osztályt alkalmazni. Ez van.