margin value shows different in Internet Explorer

[Hardballa]

Hi there, I have the following code which shows the image normally in firefox but shows it way too high in IE.

#content-top {
display:block;
width:826px;
height:51px;
background:url(../images/top_corners.gif);
margin:200px 70px 0 100px;

}

I tried the following fix but it had absolutely no impact in IE:

!–[if IE]>
style>
#content-top {
margin-top: 500px;

}
/style>

p.s. I did put the required < for the if IE and style tags but I had to remove them for this post to show

[Hardballa]

ok, I’m definitely doing something wrong here. I just realized that my page looks all messed up when the window is sized down on either browsers. The image from the body tag is pushed to the left instead of being centered and the background from the html tag is only seen on the far right. There’s gotta be a way to auto adjust the page when the browser window is made smaller. Here’s the codes:

NouPapBayVag




Connexion


S'inscrire


Liens




facebook


twitter












English

and for css:

html,body,div {margin:0; padding:0; border:0;}

html {height:100%; background:url(../images/background.jpg) repeat-x;}

body {
font:9pt/17pt arial;
height:100%;
background:#d6e0fc url(../images/bg.jpg) top center no-repeat ;

}

.clear {
clear:both;
}

a {color:#0c38a7; text-decoration:none; outline:none;}

#container {
display:block;
width:1000px;
margin:0 auto;
}

p#logo {
display:inline;
float:left;
width:282px;
height:64px;
background:url(../images/logo.gif);
margin:-3px 0 0 10px;

}

p#logo a {
display:block;
width:282px;
height:64px;
text-indent:-5000px;
}

#container ul {
list-syle-type:none;
display:inline;
float:left;
margin:10px 0 0 406px;

}

#container ul li a:hover {
color:#f30e24;
}

#container ul li {
display:inline;
float:left;
margin-right:16px;
}

#container ul li#end{
color:#0c38a7;
}

p.facebook {
margin-top:10px;
margin-left:-10px;
display:inline;
float:left;
width:19px;
height:21px;
background:url(../images/facebook.gif);
}

p.facebook a {
display:block;
width:19px;
height:21px;
text-indent:-5000px;
}

p.twitter {
margin-top:9px;
margin-left:7px;
display:inline;
float:left;
width:24px;
height:23px;
background:url(../images/twitter.gif);
}

p.twitter a {
display:block;
width:24px;
height:23px;
text-indent:-5000px;
}

#content-top {
display:block;
width:826px;
height:51px;
background:url(../images/top_corners.gif);
margin:200px 70px 0 100px;

}

#english {
display:inline;
float:right;
margin:-52px 192px 0 0;
}

#english a:hover {
color:#f30e24;
}

#top-nav {
width:826px;
height:54px;
display:block;
background:url(../images/header_nav_bg.gif) repeat-x;
margin-left:100px;
}

#content {
display:block;
width:826px;
background-color:#fff;
}

[jamygolden]

Try validating your page.

[TT_Mark]

Are you using a proper reset stylesheet?

[Author]

Posts