[Solved] IE6 & IE 7 problems

[svipic]

hi… my website doesn’t work correctly in this 2 browsers and can’t figure out why

The website in this browsers moves right instead of center
It is working fine in any other browser even in IE 8, But IE 7 and 6 it doesn’t
Aspecialy i didn’t mind that it will work for IE6 but IE7 is a must …

Can someone help me here ?

Code:

@charset “utf-8”;
/* CSS Document */

body { width:800px;
margin: 0 auto;
padding-top:50px;
/*background: url(images/bg.jpg) repeat;*/
background-color:#000;
direction:rtl;
border: 0;
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
a:link {
text-decoration: none;
color: #FFF;
}
a:visited {
color: #FFF;
}
a:hover {
color: #FFF;
}
a:active {
color: #FFF;
}

#container {width:800px; background-color:#000; border-color:#60F;}
#container .logo {width:800px;}
#container .logoright {width:300px;}

ul { list-style-image:url(images/loadinfo.net.gif);
text-align:right;

}
/* ——————- Start Menu ——————- */

#container .menu {width:800px;
height:43px;
background:url(images/menull.png);
list-style:none;
margin: 0 auto;
padding: 0;
position:relative;

}
.menu ul { }

#nav ul {
margin: 0px;
padding-left:210px;
list-style: none;
}
#nav ul li {
}

#nav ul li,
#nav ul li a {
float: left;
display: block;
}

#nav ul li a {
margin: 8px;
padding: 1px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight:700;
color: #fff;
text-decoration: none;
}
#nav ul li a:hover,
#nav ul li a.selected {
background-color: #fff;
color: #272727;
}

/* ——————- End Menu ——————- */
#container .footer {width:100%;
height:40px;
background-image:url(images/footer.png);
font-family:Tahoma, Geneva, sans-serif;
color:#FFF;
font-size:10px;

;}

#container .footer .leftboard {width:130px; float:left; text-align:right; font-size:14px; font-weight:800; padding-left:40px;}
#container .footer .rightboard {width:170px; float:right; text-align:right; font-size:14px; font-weight:800; padding-right:40px;}
#container .zero {
text-align: center;
background-color:#000;
background:url(images/logo2.jpg) center no-repeat;
height:300px;
width:100%;
}
#container .zerogallery {
text-align: center;
background-color:#000;
background:url(images/logo2.jpg) center no-repeat;
height:100%;
width:100%;
}

.doh {height:150px;}
#container .zero .flash {
width:158px;
padding-left:10px;
padding-top:20px;
float:left;
}
#container .zero .flashright {
width:158px;
padding-left:10px;
padding-top:20px;
float:right;
}

#container .zero .flashleftbutton {
width:100px;
padding-left:80px;
padding-top:20px;
float:left;
}

#container .footer {width:100%; height:40px;}
#container .aware {
margin: 0 auto;
text-align:center;
font-size:10px;
font-family:Tahoma, Geneva, sans-serif;
padding-top:23px;

}

/* contact css */
#contactzero {
width:100%;
height:100%;
background:url(images/logoopacity.jpg) center no-repeat;}

.contactmerq {width:140px; height:230px; float:left;}

.contactform {width:300px; float:right; padding-right:20px; text-align:right; padding-top:7px;}

/* End Contact Css */

#idox {
width:300px;
height: 50px;
margin:0 auto;
padding-top:10px;
text-align: center;
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
}

#idox img {border:0;}
#idox a:link {border: 0;}
#idox a:visited {color:#FFF;}

[Dominic]

EDIT.

You could try taking the width and margin properties off body and put them on the #container div instead.
Like so:
#container {width:800px; margin:0 auto;}

Might not work…

[svipic]

thank you very much…
It solved the problem…
Learned something new today…

Thanks again !

[Author]

Posts