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 iewygląd w ie

W firefox’ie oczywiście wszystko ok:

wygląd w ffwyglą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

Liczba komentarzy: 5

brocq - Gravatar

8 października 2006 o godzinie 10:38 brocq skomentował:

Tak btw…ty mieszkasz teraz w Olsztynie?

Marcin - Gravatar

8 października 2006 o godzinie 16:45 Marcin skomentował:

Tak btw…ty mieszkasz teraz w Olsztynie?

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

brocq - Gravatar

8 października 2006 o godzinie 21:54 brocq skomentował:

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

To czemu tak śmiesznie?

Marcin - Gravatar

9 października 2006 o godzinie 14:05 Marcin skomentował:

Sugerowałem się tym

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

Metys - Gravatar

21 sierpnia 2007 o godzinie 10:02 Metys skomentował:

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…

Dodaj komentarz

Należy wpełnić pola oznaczone znakiem gwiazdki "*". Proszę zapoznać się z zasadami komentowania.