IE7 and below adding extra padding!

cokecan

cokecan

cokecan

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
 
If you can live with slightly less space, then changing the following in #middleColumn seems to work:

width: 794px; => width: 789px;




Where's the Wave thread today? :p
 
In your CSS the div #leftColumnTopInner you're specifying a width of 195px and 7px of left/right padding.

In FF/IE8 etc, this is then interpreted as Div width = 195px - 7px - 7px, so that the width is 195px, inclusive of padding.

In IE7 etc. it becomes Div width = 195px + 7px + 7px, so width is exclusive of padding.

IIRC if you specify a doctype such as XHTML Transitional this problem should be fixed automatically.

If not, you need to put the width on a containing div with no padding set, then put the padding on a nested div inside that.

Also, you have quite a few elements with the same ID - you need to change these to classes.
 
Double Margin Bug and Z-Index are probably what you need.

Add "display: inline;" to the CSS for the left column.

Add "z-index: 999;" to the CSS for the drop down ul, or li elements.
 
Spunkey is right, if you specify a doctype (and you really should be doing this anyway), IE will correctly follow the box model.

The double margin bug gord mentions was fixed in IE7+ but you'll still run in to it if you're working for IE6 compatibility.
 
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
 
Sorry, Z-index won't work on its own. I think it needs a position value to be set too! Ah the joys of CSS and IE. (I am assuming that you can see the drop down in the background? It just gets stuck behind another element? Or is the drop down not activating at all?)
 
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:
You must log in or register to reply here.
Back
Top Bottom