Webes fejlesztés szépségei

A mostani munkám az egyik ingatlanközvetítő weboldalának és ügyviteli rendszerének karbantartása. A feladat amin most éppen dolgozom pedig az ingatlanok adatlapjának átalakítása: új galéria fejlesztése, kozmetikázás, stb.

Az új galéria egy viszonylag szokványos megoldást alkalmaz: fent van egy nagyobb kép, alul pedig egy görgethető filmszalagon az összes kép. A filmszalag képeire kattintva fent megjeleni nagyobban a kiválasztott kép, a nagyra kattintva pedig teljes méretében, ahol lehet közöttük ide-oda lapozni.

Ez eddig tök sima, a teljes képernyőshöz a lightbox nevű megoldást használom, de a galéria többi részét le kellett fejlesztenem.

Ami fontos, hogy fent a nagy képet ugye méretezni kell, hogy elférjen és középre igazítani a rendelkezésre álló helyen. Ezt úgy lehet megoldani, hogy a képet be kell tenni egy fix méretű DIV-be, amire be kell állítani a következő stílusokat:

display: table-cell;
vertical-align: middle;
text-align: center;

Ez viszonylag egyszerű, minden rendes böngészőn (Firefox, Safari, Opera, Chrome) királyul középre pozícionál. Kivéve IE-n. Ott minden verzión más hibát produkál. :(

Az IE8-nál régebbiek pl. nem támogatják a display: table-cell stílust, így a függőleges középre igazításhoz mindenféle trükk kell. Ezzel még nem is foglalkoztam. :(

Az IE8-nál működik, viszont szarul rosszul. :( Álló képpel tök jó, fekvővel viszont szétnyújtja vízszintesen a DIV-et és abban pozícionál.

Több napi szenvedés után ma megtaláltam az okát: ez egy ismert IE8 bug. Ha display: table-cell van megadva, és abban egy kép max-width-el van átméretezve, akkor szétnyújtja a DIV-et. :(

Szerencsére ugyanitt közölték a megoldást is: a DIV köré kell egy másik, amelyik a display: table stílus mellé meg kell, hogy kapja a table-layout: fixed-et is. Ez utóbbi a megoldás kulcsa. Ezt beírtam és már működik is.

De hogy ezzel 3 napot (többé-kevésbé) kelljen szopnom szenvednem... :((((

 

Comments

Már Heki is megmondta, hogy az IE nem böngésző! Egyébiránt nálam az Opera is szokott érdekességeket művelni pl Javascriptnél (ami megy minden máson, az ott nem igazán) .

Igen, most vettem észre, hogy az Opera nagyon sok mindenben az IE-t veszi alapul. Pl. volt olyan fázis, hogy a weboldal működött már mindenben, kivéve IE6 és Opera 10. :( Egyébként azóta megoldottam a problémát minden böngészőre: detektálom, hogy IE van-e? Ha igen és 7-es vagy régebbi, akkor a pozícionálást javascriptből oldottam meg. Ha igen és 6-os, akkor pedig a méretezést is. A többi böngésző (ideértve az IE8-at is) CSS-ből is tudja...