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