Spacing is messed up in IE (html/css issue)

Question

sorry about this, I'm normally fine with HTML/CSS, but I'm stuck on this.

Basically, I have a header, with navigation below that, and then a small space, followed by an area for the content of the site. It's working perfectly in Firefox, but annoyingly, in IE, that small space becomes pretty large. Lowering the value for margin-top on the indexbody class fixes the problem for IE, but removes any kind of gap at all for Firefox.

My code is here. I can provide more of it if needed :)

Thanks loads in advance! :)

*code edited out: see http://jsfiddle.net/eoJ1/PRjF7/ or http://www.joemarketeer.com/stackoverflow/index.html :)

Thanks again! Sorry for the wall of text.

Answer 1

It's because IE is registering the height on your "navigation" div and also you are using a margin-top: 90px to add the spacing. whereas other browsers are disregarding the "navigation" height and basically just using the margin-top:90px you have on your content area.

Use a clearfix on that navigation div that has the floats and then use "margin-bottom: 30px" on the navigation instead of "margin-top:" on the content area.