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
- nadać dokładne reguły koloryzujące LI
- nadać dokładną długość elementu LI
Komentarze
Tak btw…ty mieszkasz teraz w Olsztynie?
Nie. Od 14 lat mieszkam w Warszawie, a za chwilę będe mieszkał w Naborowie.
Sugerowałem się tym…
iWorks Marcin Pietrzak
ul. Grabowa 25
10-161 Olsztyn
To czemu tak śmiesznie?
Bo ja wiem, taki mam meldunek, tam mam siedzibę firmy. Tam płacę podatki i ubezpieczenie.
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…