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

[cgreen917]

Hello everyone:

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…..too low in margins in IE 8. It looks a mess. This is driving me nuts.

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:

<!–[if IE]>
<link href="IE_fix.css" rel="stylesheet" type="text/css" />
<![endif]–>

In the the IE_fix.css file I included the folowing 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

[noahgelman]

First tip. Always start your stylesheet with

Code:

* {
margin:0;
padding:0;
}

It zero outs everything for cross browser compatibility. Judging by how the body and the container_one div are showing up with Fire Bug on Mozilla, I can see how it would not be pushing it down in IE 6 and 7. Start with that and reply if you still have troubles.

Also, just a heads up. You have to fix that font button in the bottom right. In IE7 it is rendering half way below the browser causing infinite scroll. Kinda weird. It’s attached to with java and that’s a game I don’t want to get into this late at night.

Good luck.

[cgreen917]

Thanks for the suggestion, noahgelman. Adding * { margin:0; padding:0; } seems to have helped in IE8 but the problems persists in IE6 and 7. I also notice that the "submit" div is displaying too far right in IE8 (it’s partially under the content div). In all, I’m still stumped.

Why didn’t the conditional comment, that I wrote before I initially posted here, fix the issue?

(PS. I’d like to eliminate that Typekit font button altogether after I tackle to the more pesky display/positioning issues.)

[virtual]

Try adding a conditional comment to your body tag for IE of padding: 82px;

[cgreen917]

Quote:

Try adding a conditional comment to your body tag for IE of padding: 82px;

Hello virtual,

Only the home page is display too high. If I wrote a conditional comment for the body tag, would it effect all of the site’s pages?

[virtual]

Yes it would affect the whole site in IE, but you could put a class of home on your body tag and target that with the different padding for IE.

[birdrockdesigns]

Code:

#submit a:link, #submit a:visited, #submit a:hover, #submit a:active (line 77)

{

background-image: url(“images/submissions.png”);

width: 128px;

height: 142px;

bottom: 100px;

position: absolute;

background-repeat: no-repeat;

text-indent: -999999px;

margin-left: 25px;

display: block;

}

#submit a:link, #submit a:visited, #submit a:hover, #submit a:active (line 77)

{

background-image: url(“images/submissions.png”);

width: 128px;

height: 142px;

bottom: 100px;

position: absolute;

background-repeat: no-repeat;

text-indent: -999999px;

margin-left: 25px;

display: block;

}

You have styles defined twice in your style sheet.

Just curious, why do you need a text-indent? Also, you have a margin-left, which isn’t necessary if you’re positioning something using ‘absolute’ – use ‘left’ or ‘right’ instead of margin. Make sure your containing div is positioned using ‘relative’ as well.

Also, the ‘submit’ button on the contact page, you will need to set the styles for this, or leave the defaults – the browser controls this automatically.

[Author]

Posts