View Full Version : IE6 Layout Issue

11-01-2009, 10:23 PM
The problem:
So I'm building a new site and I have am having an issue with ie6. http://dev.joshandmichelle.net
In Ie7 and ie8 it shows up right, but in ie6, there's a gap at the bottom of the layout. It's fine in firefox, safari and chrome.

Anyway, I'm just curious if anyone knows how I can work through the issue, I'm scratching my head on it and can't seem to get it working.

Many thanks.

11-02-2009, 12:21 AM
My computer with IE6 installed is switched off so I can't preview Your site. But I see there's no conditional IE6 statement. Try making alternative css file with some fixes. I guess You'd need to relatively position broken div, but, as I said, I can't see what's wrong ;)

11-02-2009, 02:46 AM
Hello yannibmbr,
It looks like you have not cleared your floats...

Make your CSS look like this:

#content {
width: 960px;
padding-top: 65px;
overflow: auto;

Here is a site (http://www.quirksmode.org/css/clearing.html) that describes how that works.

11-02-2009, 10:18 AM
I think this might be an issue with the empty #content-btm div. IE6 doesn't like empty divs, it seems. Try adding a comment:

<div id="content-btm"><!--for IE6 --></div>

11-02-2009, 11:28 AM
#content #content-btm {
margin: 0px;
padding: 0px;
/*width: 960px;*/
background-image: url(content-btm-bg.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 80px;
/*float: left;*/
clear: left;
} should do it for you.

PS: Don't use float, if you don't need to actually float it.

11-03-2009, 01:39 AM
Thanks everyone. I will give your suggestions a try once I get home and let you know what happens... =)