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... :((((