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
- nadać dokładne reguły koloryzujące LI
- nadać dokładną długość elementu LI
Szukaj
Tagi
ostatnie komentarze
- ktos z branzy o ITCOM – cięcie grafiki
- ktos z branzy o ITCOM – cięcie grafiki
- Marcin o ITCOM – cięcie grafiki
- Przemek o Nie udało się zlokalizować katalogu zawartości WordPressa (wp-content).
- Miłosz o ITCOM – cięcie grafiki
- klatek o SEMcamp nr 3
- konrad o nginx + ssl
- Krzysiek o ITCOM – cięcie grafiki
- ayeo o ITCOM – cięcie grafiki
- Marcin o ITCOM – cięcie grafiki
ostatnio popularne wpisy
Jak używać w odnośnikach użyć mailto - Tworzenie layoutu - krok po kroku
- Post Thumbnail Widget - wtyczka do wordpress'a
- różnice w CSS dla Internet Explorer 6, 7 i 8
- Jak zretuszować zdjęcie?
- Polskie tematy do wordpress'a
- wordpress i nginx w jednym miejscu stali
- Nie udało się zlokalizować katalogu zawartości WordPressa (wp-content).
- Jak wpisać dane ftp/ssh w wordpress
Rezerwacja rejsów - komponent joomla
Liczba komentarzy: 5
8 października 2006 o godzinie 10:38 brocq skomentował:
Tak btw…ty mieszkasz teraz w Olsztynie?
8 października 2006 o godzinie 16:45 Gurthg Shae skomentował:
Nie. Od 14 lat mieszkam w Warszawie, a za chwilę będe mieszkał w Naborowie.
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?
9 października 2006 o godzinie 14:05 Gurthg Shae skomentował:
Bo ja wiem, taki mam meldunek, tam mam siedzibę firmy. Tam płacę podatki i ubezpieczenie.
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 "*".