[thelist] CSS Problems - DIV's being pushed out for some reason

Gunlaug Sørtun gunlaugs at c2i.net
Sun Feb 18 10:39:36 CST 2007

Scott Mailing List wrote:
> Can someone tell me why I'm getting extra spacing & my div being 
> pushed down in IE for the following site?  In Firefox, it looks good,
>  but not IE 6
> http://www.BostonSabres.com/index.asp is the site

A number of weak spots:

- some serious designer-flaws: wrong dimensions - a "style"-reference in
the source-code where it should be a "class"-reference - margins that
overshoot the container.

- IE's 'hasLayout' bug adds width to div, making it too wide and
subsequently pushed down.

- IE6 (and older versions) doesn't respect declared dimensions, making
containers expand so children fit inside.

- images are 'inline' and create gap/space for descenders, and IE
doesn't have an "almost standard mode" for "Transitional". That "almost
standard mode" "saves" the layout in most other browsers, but isn't
necessary since images can be styled to become 'block' elements.

Basic solution:
Avoid IE's 'hasLayout' bugs by floating the problematic div, and delete
margin on that div. Then 'clear' the footer to make it stay below the
"all float" layout, and get rid of the extra margin-right on it.

Here's a working example of your page...
...with comments so you can study the details.

> (why can't the world just switch to FF?)

(why..? It is good to have choices :-) )


More information about the thelist mailing list