Znikło coś, czyli paskudny błąd IE7

Sytuacja jest prosta. W pewnym miejscu serwisu przestała się pokazywać zawartość jednego z boksów. Widać było sam kontener, prawidłowo wypełniony tłem i prawidłowo rozciągnięty w pionie przez swoją zawartość.

Jedno ale. Zawartości nie widać.

Przykładowy listing:

  • <div class=”a”>
  • <div id=”dyn”></div>
  • </div>
  • <div class=”a”>
  • <div class=”b”>treść</div>
  • </div>

Wszystkie divy są float’owane do lewej, wszystkie też mają ustawiony clear po lewej stronie. Całość znajduje się w jakimś divie o ustalonej szerokości, a div.a mają taką samą szerokość jak parent oraz padding:0;margin:0.

Kluczem całego błędu okazało się być to, że div#dyn ma dynamicznie generowaną zawartość. (kalendarzyk).

Co było błędem?

Zmieniająca się wysokość pierwszego div.a powodowała przesunięcie drugiego div.a, jednocześnie div.b pozostał na swoim miejscu. Jego top … się nie zmienił, mimo position:static. Po prostu pozostaje, tam gdzie stał, wyłażąc w lewo poza lewy margines rodzica.

Jak naprawić?

Drugi div.a musi być ustawiony na float:none – wtedy problem nie występuje.

ie6 + ajax – koszmar z ulicy www

Wyobraźcie sobie system CMS dedykowany do obsługi naprawdę dużego ruchu, wielu redaktorów, wielopoziomowej możliwości akceptacji treści. Dobra może wystarczy. Jest sobie taki system.

Dla tych co wiedzą, jest to znany problem opisany nawet na wiki: XMLHTTP, więc jak kto zna, to nie czytać. Wpis sobie tak czy inaczej zrobię. Ku pamięci.

W przypadku jakiejś tam liczby rzeczy do wyświetlenia, np. drzewa folderów, czy dużej liczby dokumentów, warto zastosować prosty trick. Zamiast ładować całą stronę można załadować „szkielet”, a poszczególne treści dociągnąć za pomocą AJAX’a. Brzmi fajnie? I jest fajne. Same zalety, klient cieszy się że szybko coś widać, choć sumaryczny czas ładowania strony jest przecież większy, ale strona działa, można zmienić folder, przejść gdzieś po menu, a samo drzewo folderów czy też lista dokumentów z wybranego folderu może przyjść za chwilę.

Czytaj dalej ie6 + ajax – koszmar z ulicy www

Ulepszanie strony za pomocą javascriptu

Często klienci chcą „odpicować” stronę, poprzez dodanie różnych rzeczy, które „się dzieją”.

Na stronie: Usability enhancements with JavaScript w bardzo miły sposób przedstawiono parę rzeczy.

Pozwolę sobie zacytować zasady używania javascriptu:

  1. Treść jest wartością, nie zmieniaj jej.
  2. Ogranicz ulepszenia do warstwy prezentacji.
  3. Popraw niektóre błędy IE, takie jak brak obsługi tagów abbr czy q.
  4. Pamiętaj, żeby wszystko było lekkie.

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