Container Div on Home Page displays too high on in IE (6 and 7)

Hello all:

I’ve designed this site, built in Dreamweaver, which was a final class project:

http://www.exposedproductionsnyc.com

And after previewing it in FF, Safari, Opera, I recently published it online. Last week, I tested it using Browserlab in IE, where is among a few other issues, the container div on the home page is approximately 20 pixels (of margins) too high in IE 6 and 7… It looks a mess.

I also notice that the “submit” div is displaying too far right in IE8 (it’s partially beneath the “content” div).

I tried troubleshooting to no avail and then consulted a friend who suggested I try writing a conditional comment for fixes. But the comment does not seem to work; the home page is still not displaying properly. I used the following code in my html doc:

In the the IE_fix.css file I included the following declaration:

#container_one {
margin-top: 102px;
}

Can anyone look at my site tell me how I can lower the container div and why this problems is occurring?

Thanks

I think what you could do for IE6 is set a lesser height on the container.

Laying out elements with position: absolute is no really a good approach, though. Floating is much more reliable and a lot more flexible. I’d recommend that in future.

Here are some links I have for IE6 PNG fixes:

http://www.twinhelix.com/css/iepngfix/
http://www.twinhelix.com/css/iepngfix/demo/

http://www.dillerdesign.com/experiment/DD_belatedPNG/

jQuery fix
http://jquery.andreaseberhard.de/pngFix/

IE8 looks fine to me too. Not sure I trust those browsershots. :confused:

Hi nocturn, and welcome to SitePoint! :slight_smile:

It actually looks fine in both IEs. The conditional comments are working. Only the png images aren’t working in IE6, but there are fixes for that if you want them.

Thanks Ralph!

I’ve been messing around with the code and things are looking good in IE7.

But, when I checked IE8 in Browserlab , I’m still having issues; container_one div is 20 pixels too low (I was however able to fix the submit div by setting display:block; ).

IE6 continues to look wonky and sad.

Yeah ralph, I see things are looking good in 7 and 8.

6 is still kind of funky: submit and footer are low. And then there are to pesky pngs.

Hmm, IE6 was looking fine to me, except for the pngs. I’ll try to check 8 soon.