CODEWITHSUNDEEP
htmlcss
wilwaldon
wilwaldon

Reputation: 381

IE7 extra padding/margin

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!

Upvotes: 3

Views: 3538

Answers (2)

mercator
mercator

Reputation: 28656

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.

Upvotes: 3

Pete Amundson
Pete Amundson

Reputation: 900

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

Upvotes: 0

Related Questions