Dziwactwa IE - Listy
12 grudnia 2005
Pionowe przerwy
Najbardziej znany problem - w moim menu pod Internet Explorerem zostają dodane paskudne przerwy. Dlaczego tak się dzieje?
Wszystko przez to, że umieszczamy w nim elementy blokowe. Mogą być to elementy, których blokowość określa DTD, bądź którym zmieniamy kontur przez CSS.
Z tego powodu, wszelkie spacje i tabulatory występujące pomiędzy elementami listy (li) są traktowane zupełnie inaczej niż powinny. Dodana jest przerwa.
Wyjść jest parę:
- Zrezygnować z elementów blokowych.
- Usunąć białe znaki z listy.
- Zmienić zachowanie listy.
Pierwsze rozwiązanie jest podane tylko dla formalności - wiadomo, że jeśli chcemy linki w postaci blokowej, to nie będziemy się ich pozbywać i zmieniać koncepcji.
Usunąć białe znaki możemy w sposób zwyczajny i bardziej elegancki. Pierwszy to po prostu usunęcie wszystkiego pomiędzy </li> a <li>, tworząc jedną długą linijkę kodu. Polecałbym jednak zmianę toku myślenia. Przecież wystarczy zawrzeć wszystkie białe znaki w znaczniku HTML i go tam tak naprawdę nie będzie. A kod poprawny i działający.
No i wreszcie trzecie rozwiązanie. Najlepsze, bo odwołujące się do magicznej własności hasLayout Internet Explorer'a. Czym hasLayout jest, a czym nie, mam zamiar opisać za jakiś czas - na chwilę obecną powinno nam wystarczyć, że elementy które „nie mają layoutu” są bardzo często psute przez przestrzały silnik renderujący Explorer'a.
Aby zmusić listę do przyjęcia layoutu, należy ustawić elementom z zachowaniem blokowym szerokość bądź wysokość. O ile pierwszy sposób może być niedostępny dla kodera, to drugi jest bardzo ciekawy i prosty. Ustawmy height na 1% i przekonajmy się, że odstępy znikają. :)
Znikające markery
Gdy ustawimy szerokość bądź wysokość dla listy (<ol/>, <ul/>), markery pozycji znikają, bądź są umiejscowione w zły sposób. Jak mocno się zastanowić, to widzimy że kolejny problem wyświetlania jest związany z hasLayout. Bo przecież, jak już wspominałem nadajemy layout elementowi, gdy ustawimy jego wymiary.
Wyściem z tej dziwacznej sytuacji jest w większości przypadków dodanie marginesu dla elementów listy.
Numerowane listy i licznik
Uporaliśmy się z jednym problemem, zmierzamy ku następnemu. Gdy przytrafia nam się taka sytuacja, kiedy to jeden z elementów listy nagle zaczyna używać jakby nowego licznika, można wyrywać sobie włosy z głowy garściami. Ale my już się domyślamy, że znowu chodzi o posiadanie layoutu przez element. W tym przypadku jeden z elementów listy dostał określoną wysokość.
Co więcej - gdy będziemy potrzebowali umieścić więcej niż jedną linijkę tekstu w takiej pozycji listy, to marker pojawi się na dole, a nie na górze. Wyjściem z tych sytuacji jest przedefiniowanie tego co chcemy osiągnąć i podejście od drugiej strony. Zawsze znajdzie się wyjście, a nie ma nic gorszego jak dodawanie kolejnych kawałków kodu, żeby uporać się z poprzednimi błędami.
Oczywiście są także inne możliwości zmiany hasLayout na true i wynikające z tego komplikacje i ułatwienia oraz błędy pisania layoutów dla IE, ale jak wspominałem nie będę teraz się w nie wgłębiał. Zrobię to przy innej okazji, mam nadzieję, że dość bliskiej. Wierzę jednak, że coś zaczyna nam już świtać odnośnie problemów z Internet Explorerem i wyświetlaniem nowoczesnych układów stron. ;-)
