MSIE % Margin problem.

[dlychowyd]

I've been having some problems with a particular layout i've been
working on. http://darren.lychowyd.com/mono/ It works as I expect it to
in FireFox but it doesn't load properly in MSIE. When the page first
loads there is extra marging between my h1 and my 2 floating divs. When
you hover your mouse over one of the list-item links the margin
disappears and moves everything up to where I hoped it would be in the
first place. Can anyone explain this? Can anyone give me a solution to
my problem?

 

[rf]

I've been having some problems with a particular layout i've been
working on. http://darren.lychowyd.com/mono/ It works as I expect it to
in FireFox but it doesn't load properly in MSIE. When the page first
loads there is extra marging between my h1 and my 2 floating divs. When
you hover your mouse over one of the list-item links the margin
disappears and moves everything up to where I hoped it would be in the
first place. Can anyone explain this? Can anyone give me a solution to
my problem?

Short answer:

You are specifying top margin in percentage for those divs. Don't.

Long answer:

Percent of what? The viewport presumably, however IE actually uses the width
of the viewport not, as you might expect, the height. You can verify this by
draging the right border of your window around. As the width changes then so
does the gap above the divs.

Guesswork:

When IE first lays out the page (on reload, or on change of window size)
uses the width of the viewport, that is the entire width of the browsers.

Now, roll over something. Things have changed so IE does a new layout.
However, this time the page has already been layed out. So, it sort of does
a re-layout. This time however it uses the width of the viewport minus a
possible scroll bar. Slightly smaller than before. You get that small
movement.

So, don't use % for that margin. Use em or px or furlongs or something
actual.

 

[kchayka]

http://darren.lychowyd.com/mono/
When
you hover your mouse over one of the list-item links the margin
disappears and moves everything up to where I hoped it would be in the
first place. Can anyone explain this?

<URL:http://www.positioniseverything.net/explorer.html>

Lots of weird IE bugs to choose from.

 

[dlychowyd]

Thanks Richard, it helped and thanks for the bug list it will help to
avoid similar IE problems. I got another question. Is it possible to
get something like min-width to work in IE?

 

[rf]

Thanks Richard, it helped and thanks for the bug list it will help to
avoid similar IE problems. I got another question. Is it possible to
get something like min-width to work in IE?

Several hacks, most of them involving a bit of content as wide as the
requried minimum width. A div with width set to minwidth would do.