Home › Forums › CSS › margin value shows different in Internet Explorer › Re: margin value shows different in Internet Explorer
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:
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;
}