IE6 Layout Issue

[yannibmbr]

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.

[Paweł]

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

[Excavator]

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 that describes how that works.

[SB65]

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>

[abduraooft]

#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.

[yannibmbr]

Thanks everyone. I will give your suggestions a try once I get home and let you know what happens... =)