IE7 extra padding/margin

Question

http://www.wilwaldon.com/crossing/page3.html

If you look at the page in IE7 there is an ungodly amount of space between the top paragraph and the bottom spotlight area. It works fine in all other browsers.

If you know of any tricks or hacks to prevent this I'd greatly appreciate this :)

Thank you!

Answer 1

Try getting it to validate first.

Answer 2

This site may help you out with doing some conditional CSS to handle IE7:

Answer 3

if you set display:inline on your spotlight div it should render better in IE7...but that will break other browsers - so use the conditional css - or rewrite your style to be more compliant

Answer 4

The reason you're getting all that space is because of all the top padding and margin you put on the #spotlight yourself. You seem to be adding all that space as a way of making enough room for the floats inside it. Don't do that. Make the div contain its floats by adding overflow: hidden to it. If that has unwanted side-effects, add the clearfix class to it, which is already in your CSS.

The reason you're seeing all that space in IE7 is because the #spotlight has a width, which is triggering layout. That causes it to contain its floats already, pushing all that top margin and padding up above it.

Oh, and don't use multiple id="spotlightbox". That's what classes are for. IDs must be unique. Use class="spotlightbox" instead.