PDA

View Full Version : IE CSS Problem



xiaodao
Dec 10th, 2008, 04:04 AM
Hi,

I am having headache with weird problem of my recent site. This site works fine on my laptop, however after i uploaded to the server, the site break down on ie, but works ok on firefox. It is totally distord in ie, can anybody help to have a look?

www.servers.net.cn


Thanks

jhaycutexp
Dec 10th, 2008, 05:57 AM
please post your css so we can take a look.. can't seem to open it..

xiaodao
Dec 10th, 2008, 07:18 AM
/* CSS Document */
body{padding:0px; margin:0px; background:url(../images/bg.gif) 0 0 repeat-x #fff; color:#707070; font:14px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;}
div, p, ul, h2, h3, img{padding:0px; margin:0px;}
ul{list-style-type:none;}
/*----------------------------header----------*/
#header{
width:738px; margin:0 auto; height:152px; padding:32px 0 0 0; font-size:0;
}
#header img{
padding:0 0 0 21px; float:left; display:block;
}
#header ul{
width:156px; padding:0 23px 0 0; float:right; display:block; font-size:0;
}
#header ul li{
display:block; margin:0 0 1px 0; padding:0;
}
#header ul li a{
display:block; margin:0; padding:0; font-size:0;
}
#header ul li a.online{
background:url(../images/online.gif) no-repeat 0 0; width:156px; height:23px; text-indent:-2000px; font-size:0;
}
#header ul li a.online:hover{
background:url(../images/online_h.gif) no-repeat 0 0;
}
#header ul li a.phone{
background:url(../images/phone_num.gif) no-repeat 0 0 #FFFFFF; color:#454545; height:23px; width:119px; display:block;
font:bold 16px/23px "Trebuchet MS", Arial, Helvetica, sans-serif ; padding: 0 0 0 37px;
}
#header ul.navi{
width:738px; display:block; height:44px; padding:2px 0 0 19px; margin:2px 0 0 0;
}
#header ul.navi li{
display:block; float:left;
}
#header ul.navi li a{
font:bold 13px/30px "Trebuchet MS", Arial, Helvetica, sans-serif; display:block; float:left; text-decoration:none;
text-align:center;
}
#header ul.navi li a.home{
width:69px; height:44px; display:block; background:url(../images/navi_bg.gif) repeat-x 0 0 #394242; color:#D3D6D6;
}
#header ul.navi li a.home:hover{
background:url(../images/home_h.gif) no-repeat 0 0 #FFFFFF; display:block; color:#232323;
}
#header ul.navi li a.about{
width:87px; height:44px; display:block; background:url(../images/navi_bg.gif) repeat-x 0 0 #394242; color:#D3D6D6;
}
#header ul.navi li a.about:hover{
background:url(../images/about_h.gif) no-repeat 0 0 #FFFFFF; display:block; color:#232323;
}
#header ul.navi li a.download{
width:115px; height:44px; display:block; background:url(../images/navi_bg.gif) repeat-x 0 0 #394242; color:#D3D6D6;
}
#header ul.navi li a.download:hover{
background:url(../images/download_h.gif) no-repeat 0 0 #FFFFFF; display:block;color:#232323;
}


/*----BODY TOP PANEL----*/
#bodytopmainPan{width:100%; background:#F4F4F4; color:#8D8D8D; float:left; padding:25px 0 0; clear:both;}

#news {width:747px; position:relative; background:#F4F4F4; color:#707070; margin:0 auto; padding:0px;}
#news h2{background:#F4F4F4; color:#6E6C00; font-size:24px; height:70px; line-height:70px;}
#news ol{ font: italic 1em Georgia, Times, serif; color: #999999;margin-top:0px;}
#news ol p{ font: normal .8em Arial, Helvetica, sans-serif; color: #000000;}

#MainPromotionBanner{
width:747px;
height:200px;
background:#333;
position:relative;
margin:0 auto;
padding:0px;
}

#bodytopPan{width:747px; position:relative; background:#F4F4F4; color:#707070; margin:0 auto; padding:0px;}
#bodytopPan h2{background:#F4F4F4; color:#6E6C00; font-size:24px; height:70px; line-height:70px;}
#bodytopPan p{padding:0 38px 11px 0;}
#bodytopPan p span{font-weight:bold;}
#bodytopPan p.more{margin:0 0 15px 618px; padding:0px;}
#bodytopPan p.more a{display:block;width:79px; height:28px; background:url(../images/button1.gif) 0 0 no-repeat #fff; color:#111; font-size:15px; line-height:28px; text-decoration:none; padding:0 0 0 10px;}
#bodytopPan p.more a:hover{background:url(../images/button2.gif) 100% 0% no-repeat #fff; color:#111; text-decoration:none;}
/*----/BODY TOP PANEL----*/


/*----BODY MIDDLE PANEL----*/
#bodymainmiddlePan{width:100%; background:#fff; color:#8D8D8D; float:left; padding:10px 0 0; clear:both;}

#indexmiddlePan{width:747px; position:relative; margin:0 auto 0 auto; background:#fff; color:#8D8D8D;}
#submiddlePan{width:747px; position:relative; margin:0 auto 0 auto; background:#fff; color:#8D8D8D;}
#submiddlePan h2{background:#F4F4F4; color:#6E6C00; font-size:24px; height:70px; line-height:70px;}
#packPan{width:747px; position:relative; margin:0 auto 0 auto; background:url(../images/packbg.png); color:#8D8D8D;}
/*---Middle One----*/
#showBlocks {
display: block;
width:747px;
position:relative;
margin:0 auto;
}

#showBlocks {
margin: 0px;
}
#showBlocks h2{background:#F4F4F4; color:#6E6C00; font-size:24px; height:70px; line-height:70px;}
#showBlocks div {
float: left;
width: 180px;
display: block;
background: url(../images/showblock-bg.png);
overflow: hidden;
}


#showBlocks div h3 {
margin: 0px;
height: 30px;
width: 180px;
background-image: url(../images/showblock-topbg.png);
color:#fff;
text-align:center;
padding-top:8px;
}

#showBlocks div img {
display: block;
padding: 15px 0 15px 15px;
background: url(../images/showblock-screen-bg.png);
}

#showBlocks div ul{
width:136px; display:block; height:125px; padding:7px 0 0 10px;
margin:0px 0px 0px 10px; float:none; color:#000000;
}
#showBlocks div ul li{
background:url(../images/red_arrow.gif) no-repeat 0 3px; padding:0 0 0 20px; border-bottom:#A4A4A4 1px dashed; margin:0;
display:block; height:20px; width:98px;font:normal 11px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#showBlocks div ul li.nobor{
background:url(../images/red_arrow.gif) no-repeat 0 3px; padding:0 0 0 16px; border-bottom:none; margin:0;
display:block; height:20px; width:98px;font:normal 11px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#showBlocks div ul li b{
font-size:12px;
}
#showBlocks div p {
margin: 0;
width:100%;
}
#showBlocks div p a{
background:url(../images/ordernow.png) no-repeat 0 0; width:72px; height:22px; margin:10px; float:right;
text-indent:-2000px;
}
#showBlocks div p span{
display:block;
float:left;
font-size:22px;
margin:10px 0px 10px 22px;
color:#fff;
}
/*---/leftbody----*/
#leftbody{
display:block;
width:564px;
float:left;
}

#showProducts {
display: block;
width:564px;
}

#showProducts {
margin: 0px;
}
#showProducts h2{background:#F4F4F4; color:#6E6C00; font-size:24px; height:40px; line-height:40px;margin-bottom:15px;clear:both;}
#showProducts div {
float: left;
width: 180px;
display: block;
background: url(../images/showblock-bg.png);
overflow: hidden;
margin-right:8px;
margin-bottom:15px;
}


#showProducts div h3 {
margin: 0px;
height: 30px;
width: 180px;
background-image: url(../images/showblock-topbg.png);
color:#fff;
text-align:center;
padding-top:8px;
}

#showProducts div img {
display: block;
padding: 15px 0 15px 15px;
background: url(../images/showblock-screen-bg.png);
}

#showProducts div ul{
width:136px; display:block; height:125px; padding:7px 0 0 10px;
margin:0px 0px 0px 10px; float:none; color:#000000;
}
#showProducts div ul li{
background:url(../images/red_arrow.gif) no-repeat 0 3px; padding:0 0 0 20px; border-bottom:#A4A4A4 1px dashed; margin:0;
display:block; height:20px; width:98px;font:normal 11px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#showProducts div ul li.nobor{
background:url(../images/red_arrow.gif) no-repeat 0 3px; padding:0 0 0 16px; border-bottom:none; margin:0;
display:block; height:20px; width:98px;font:normal 11px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#showProducts div ul li b{
font-size:12px;
}
#showProducts div p {
margin: 0;
width:100%;
}
#showProducts div p a{
background:url(../images/ordernow.png) no-repeat 0 0; width:72px; height:22px; margin:10px; float:right;
text-indent:-2000px;
}
#showProducts div p span{
display:block;
float:left;
font-size:22px;
margin:10px 0px 10px 22px;
color:#fff;
}
/*---/article----*/
#article{width:747px; position:relative; margin:0 auto 0 auto; background:#fff; color:#8D8D8D;padding:20px;}
#article h2{background:#F4F4F4; color:#6E6C00; font-size:24px; height:40px; line-height:40px;padding-left:10px;}
#article p{margin-top:15px;}
/*---/rightbody----*/
#rightbody{
display:block;
width:183px;
float:right;
background-color:#F4F4F4;
}

#rightbody h2{background:#F4F4F4; color:#6E6C00; font-size:24px; height:40px; line-height:40px;margin-bottom:5px;clear:both;}
#rightbody ul.testip{
background-color:#F5CC0C;
color:#333;
margin: 0;
list-style-type: none;
}
#rightbody ul.testip li{
padding:5px;
border-bottom:1px dashed #efefef;
}
#rightbody p.free{
margin: 0;
clear:both;
display:block;
}
#rightbody p.free img{
float:left;
width:86px;
}

#rightbody p.contact{
background-color:#F5CC0C;
color:#333;
margin: 0;
padding:5px;
border-bottom:1px dashed #efefef;
clear:both;
display:block;
height:18px;
}
#rightbody p.contact span{
float:left;
margin-right:3px;
}
/*----CONTROL PANEL----*/
#mytable {
width: 100%;
padding: 0;
margin: 0;
}



th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(../images/bg_header.jpg) no-repeat;
}

th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}


td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(../images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(../images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*----Ecommerce PANEL----*/

#lefteco{
float:left;
padding:10px;
width:121px;
}
#righteco{
float:left;
padding:10px;
background:#efefef;
width:586px;
}
#righteco p {
margin: 0;
width:100%;
}
#righteco p a{
background:url(../images/ordernow.png) no-repeat 0 0; width:72px; height:22px; margin:10px; float:right;
text-indent:-2000px;
}
#righteco p span{
display:block;
float:left;
font-size:22px;
margin:10px 0px 10px 0px;
color:#6E6C00;
}
/*------------------------footer-----------*/
#mainfooter{
width:100%; border-bottom:#BBBBBB 14px solid; background-color:#555544; color:#EFE4BF;margin-top:40px;padding-top:10px;clear:both;text-align:center;
}
#footer{
width:666px; margin:0 auto; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif ; font-size:0; height:72px;
padding:15px 0 0 0; text-align:center;
}
#footer ul{
display:block; height:16px; font-size:0; margin:0px;width:210px;background:#ccc;
}
#footer ul li{
font:bold 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; background-color:#555544; float:left;
display:block; margin:0; padding:0;
}
#footer ul li a{
height:16px; padding:0 10px 0 10px; font:bold 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff;
background-color:#555544; text-decoration:none;
}
#footer ul li a:hover{
background-color:#F4F3E7; color:#1C1C1C;
}
#footer p{
color:#EFE4BF; font-size:12px; width:264px; display:block; margin:0px; line-height:16px; background-color:#555544;clear:both;
}

#footer p.copy{
color:#BEC63A; font-size: 11px; width:264px; margin:0px; line-height:16px; text-transform:uppercase;
height:16px; padding:0; background-color:#555544; font-weight:bold;clear:both;
}
#footer p.copy b{
color:#FFFFFF; background-color:#555544;
}
#footer p.copy a{
text-decoration:none; color:#BEC63A; background-color:#555544;
}
#footer p.copy a:hover{
text-decoration:underline;
}


thanks

jhaycutexp
Dec 10th, 2008, 07:46 AM
okay.. i think you need to check/validate your css..

i see several problems there.. like for this example..




#showBlocks {
display: block;
width:747px;
position:relative;
margin:0 auto;
}

#showBlocks {
margin: 0px;
}



you have repetitive styles over-riding each other.. i also see that's the problem you are having..

good luck

abduraooft
Dec 10th, 2008, 08:06 AM
Fix the errors in your markup first, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.servers.net.cn%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

I think, there is an invalid character before your DOCTYPE.