IE7 div（容器内）差距和误判问题

Question

I'm having an issue where IE7 simply will not display my DIV's properly..Firefox 3, Safari, Opera, Chrome, IE8 and even IE6 (with some JS help) display the page fine, but for some reason, in IE7 the footer seems to be...outside of the container. You can clearly see a gap between the footer and the #content div in the below screenshot. There is also some misalignment from the #information div down.

The link to the live site is: http://chronologic.ath.cx .

I can almost guarantee the issue is caused by my complete lack of understanding of CSS, so I apologize for the messy bloated markup.

Answer 1

It looks like an issue of clearing floats because both elements inside of #footer are floated. Try adding #footer { overflow:hidden; } #footer { overflow:hidden; } .

Answer 2

Just took a quick look, but you may want to rethink applying height: 100% to div#container. Older versions of IE frequently don't behave as expected and take 100% to mean the width or height of the page, not the container that it is in. I can't verify this though without further investigation.

Answer 3

overflow:hidden clear:both and making sure you have reset your HTML with html { padding: 0; margin: 0;} html { padding: 0; margin: 0;} should fix it