Ostatnio napotkaÅ‚em na nastÄ™pujÄ…cy problem: div w którym miaÅ‚a znajdować siÄ™ główna treść strony miaÅ‚ być z lewej i prawej strony ozdobiony grafikÄ…, której wysokość miaÅ‚a siÄ™ automatycznie dopasowywać do wysokoÅ›ci elementu div w zależnoÅ›ci od iloÅ›ci treÅ›ci jaka siÄ™ w nim znajdzie. Szerokość byÅ‚a z góry zaÅ‚ożona i staÅ‚a.

Problem polegaÅ‚ na tym, że wysokość div nie jest dziedziczona w żaden sposób od obiektu nadrzÄ™dnego, jak również nadanie parametru height:auto nic nie pomoże z przyczyn oczywistych. Problem z poprawnym wyÅ›wietlaniem takiego efektu nie ma przeglÄ…darka IE7.0. Poblem dotyczy pozostaÅ‚ych, zgodnych z najnowszymi standardami przeglÄ…darek. RozwiÄ…zanie problemu można obejrzeć tutaj (kod strony w peÅ‚ni dostÄ™pny poprzez wybranie funkcji “Pokaż źródÅ‚o strony”).

W powyższym przykÅ‚adzie jest zagnieżdżonych kolejno 5 elementów div, przy czym div z zawartoÅ›ciÄ… (piÄ…ty, najbardziej zagnieżdżony) rozciÄ…ga w pionie pozostaÅ‚e, które zawierajÄ… odpowiednie elementy graficzne. W IE7 strona wyglÄ…da dobrze, za wyjÄ…tkiem różnic w interpretacji parametrów margin i padding. W przeglÄ…darkach Firefox/Opera rozciÄ…ganie możliwe jest poprzez zastosowanie div z parametrami clear:both oraz height:0px. Taki element bÄ™dzie niewidoczny w przeglÄ…darkach Firefox/Opera. Dopisanie jednak tych dodatkowych elementów div do kodu strony spowoduje, iż pojawiÄ… siÄ™ one w… IE7! W ostatecznym rozwiÄ…zaniu problemu pomogÄ… instrukcje warunkowe (ang. conditional comments), umożliwiajÄ…ce ukrycie części kodu dla wybranych przeglÄ…darek.

Przydatne linki:
CSS DIV layouts
CSS Rollover, Columns, Rounded Corners, Margin/Padding