ciekawe zachowanie IE

W czasie pracy nad jednym z serwisów pojawił się dość ciekawy błąd IE.

Mianowicie dla kodu:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
html,body,ul,ol,li{margin:0;padding:0}
ul{list-style-type:none}
a{text-decoration:none}
#menumain{width:185px}
#menumain ul{background-color:#455}
#menumain a,#menumain .first li a{color:#fff}
#menumain a,#menumain .first li a{display:block}
#menumain a,#menumain .first li a{border-top:1px solid #fff}
#menumain a,#menumain .first li a{padding:4px}
#menumain ul ul{background-color:#678}
#menumain ul ul .on{background-color:#f13}
#menumain .on ul a{padding-left:17px}
</style>
</head>
<body>
<div id="menumain">
<ul>
<li class="on first"><a href="#">Wybory samorządowe</a>
<ul>
<li class="on"><a href="#">Geografia</a></li>
<li><a href="#">Komitety</a></li>
</ul>
<li><a href="#">Dokumenty wyborcze</a></li>
<li><a href="#">Akty prawne</a></li>
<li><a href="#">Mapa serwisu</a></li>
</ul>
</div>
</body>
</html>

Mozecie sobie pobrać spakowane źródło tego przypadku.

W dość nieoczekiwany sposób, IE zaczął kolorwać następne LI kolorem tła nadrzędnego UL.

wygląd w ie

W firefox’ie oczywiście wszystko ok:

wygląd w ff

Generalnie okazało się, że to nadrzędne li po prostu „spada” niżej. Co oczywiście nie powinno mieć miejsc.

Rozwiązanie

  1. nadać dokładne reguły koloryzujące LI
  2. nadać dokładną długość elementu LI

Poprzedni

Kochani Klienci

Następne

Wybory 2006

5 komentarzy

  1. brocq

    Tak btw…ty mieszkasz teraz w Olsztynie?

  2. Tak btw…ty mieszkasz teraz w Olsztynie?

    Nie. Od 14 lat mieszkam w Warszawie, a za chwilę będe mieszkał w Naborowie.

  3. brocq

    Sugerowałem się tym…
    iWorks Marcin Pietrzak
    ul. Grabowa 25
    10-161 Olsztyn

    To czemu tak śmiesznie?

  4. Sugerowałem się tym

    Bo ja wiem, taki mam meldunek, tam mam siedzibę firmy. Tam płacę podatki i ubezpieczenie.

  5. Metys

    Rozwiazanie:
    * html [selektor] {display:inline-block}

    W IE 6 wszystkie elementy typu „inline” powinny byc przemianowywane na „inline-block” zamiast „block”. Eliminuje to szersza grupe problemow zwiazanych z takimi elementami jak span, input, itp…

Oparte na WordPress & Theme by Anders Norén

iWorks Marcin Pietrzak

Wykorzystujemy ciasteczka do spersonalizowania treści i reklam, aby oferować funkcje społecznościowe i analizować ruch w naszej witrynie.

Informacje o tym, jak korzystasz z naszej witryny, udostępniamy partnerom społecznościowym, reklamowym i analitycznym. Partnerzy mogą połączyć te informacje z innymi danymi otrzymanymi od Ciebie lub uzyskanymi podczas korzystania z ich usług.

Informacja o tym, w jaki sposób Google przetwarza dane, znajdują się tutaj.