Internet Explorer 7 css/html float bug

Question

The problem is a footer on a web page that seem to not follow the correct flow like it does in FireFox. The problem feels like it is an Internet Explorer related bug, because the layout will "magically" snap into place when i move the mouse over the link "Legg til i handlelisten". On pages where the "description" part of the page is longer then the left column, the footer displays correctly. From what I can gather the bug is only active in IE8 when its running in "IE8 Compatibility Mode" or "IE7 mode". I am not able to recreate the bug when running IE6.

I was wondering if anyone is able to find a solution to this bug, maybe some CSS property I can set or a tag that needs modification.

These two images show the error and what its supposed to look like:

http://tinyurl.com/layout-error

http://tinyurl.com/layout-fixed

The page referred to is here: http://tinyurl.com/yb9h34d

Edit: Clear: both; doesnt seem to do anything to solve the problem.

Answer 1

Try floating the div.container or remove it, as it is useless and a mild case of divitis.

Answer 2

Yes... it looks like a float-caused problem.

Try adding this line into your HTML, just before the footer:

<div style="clear: both;"></div>

I think it is expecting an item that clears the floats.

Answer 3

In older browsers, the float property in CSS removes the height from the element. Therefore an element which is floated to the left or right which would normally have a height of say 100px would now have a height of 0px and whatever content is below it would move up to fill that space where the content is supposed to be. Most browsers have fixed that error by now, but it still reappears in even the modern browsers. There is a very simple fix that you can add to your footer container in the CSS:

clear: both;

This will cause the element to clear any boxes that may be floating around and start fresh on its own line, or should anyways. It never hurts to try.

Read more about the clear property: http://www.w3schools.com/Css/pr_class_clear.asp

Answer 4

What happens exactly is that the left column gets shorter by a line when you hover the first link in the leggtilihandleliste div, and it gets longer by a line again when you hover the second link. It's only the left column div that is affected, not the link, the list containing the links or the div containing the list.

I don't know exactly why this is happening, but if you specify a height for the div containing the links, it stops happening (eventhough it's not that div that changes size).

Answer 5

Why does DIV#footer have display:none on it?

Anyway, if you float: left on .footerWithRightAndLeft you should be ok.

You can inspect things in IE if you hit F12, in case you didnt know. It's not as good as firebug, but it's something.