Niedawno ktoś zwrócił mi uwagę na problem z wyświetlaniem strony.
W Firefoxie, Operze i Chrome strona www.turystyka-powiat-nowosolski.info.pl wyświetla się normalnie, natomiast w IE środkowa kolumna jest odsunięta w prawo przez co jest węższa. Dodatkowo na stronach z grafiką obrazki wchodzą pod prawą kolumnę.
Wygląda na to że problem występuje jak jest złączony tryb zgodności w IE. Nie wiem jak z tego wybrnąć. Odwiedzający stronę mnie atakują.
Takie pierwsze moje spostrzerzenie:
Standardowy problem - model boksowy: używasz paddingu, który dla IE zwiększa rozmiar DIV o wartość tego paddingu.
read more:
Dla wszystkich przeglądarek padding WIZUALNIE zwiększa wielkość elementu. Dobrze pokazałeś, nie dokońca dobrze się wyraziłeś;)
http://www.w3.org/TR/CSS2/box.html#box-dimensions
Czyli jak mierzysz np. 3 divy np. w GIMPie to bez paddingów ma
.div1{ width:200px; }
.div2{ width:400px; }
.div3{ width:150px; }
A jak chcesz dodać przykładowe paddingi
.div1{ width:180px; padding:10px; }
.div2{ width:380px; padding-left:20px; }
.div3{ width:120px; padding:0px 10px 10px 20px; }
W większości przypadków takie coś działa.
Zauważyłem również że IE mają tendencje do zwiększania atrybutu margin, a IE6 do zrzucania divów na dół (np. gdy jest wg IE za szeroki).
Naturalny efekt skoro przy divach z float:left/right; IE6 zwiększa margin dwukrotnie, tzw. Dooubled-Float Margin: http://www.positioniseverything.net/exp … argin.html
Ja zawyczaj dla IE6 ew IE7 pisze osobny styl i zamieszczam w komentarzu z odpowiednim kodem: