IE7 and below adding extra padding!

Soldato
Joined
4 Jan 2004
Posts
7,774
Location
Nottingham
Hey Guys

I'm having trouble getting IE7 and below to display a webpage correctly.

I've got a simple layout; header at the top, 200px wide left column, a larger right hand column thats about 800px wide and a footer at the bottom of the page. All these bits are floated left with various margins and padding setup. All of this is inside 2 div boxes to create a border with rounded corners in the center of the page.

stripped down example here: http://www.martin-morrison.co.uk/index.php

Now in IE8, Firefox, Chrome, Safari it displays perfect, but in IE7 (inc. IE8 compatibility) and below it seems to be adding in some extra padding to the left column which in turn is pushing the right hand column down the page. It's also removing the padding on the top and bottom of the page where the border should be and the drop down menu seems to appear behind the left column instead of on-top of it.

Does anyone have any ideas on how I can fix any of these issues :)

Thanks in advance
 
Thanks for the replies guys

I've started to clean up my CSS a bit and group some of the div's properties together into classes while creating some new div's to apply the padding too as Spunkey suggested. That's brought most of the site back into line but there is still a couple of issues:

The border at the top of the page is not visible, neither is the bottom of the border of the left column boxes. Even though the inner boxes fit now it's still overlapping the bottom part of the border.

Also setting the z-index to 999; hasn't solved the menu displaying behind the left column
 
the drop down is working fine, it just opens behind the left column (but not the large right column?).

The bit of the menu that drops down is positioned absolutely and the z-index is set at 111 but theres something about the left columns that always makes it open behind it. The menu opens on top of everything else fine.

EDIT: I think I have it sorted, setting the z-index on the div that contains the menu seems to have done the trick. I'm sure I tried that before but it didn't have any effect? :p
 
Last edited:
Back
Top Bottom