CSS problem in Internet Explorer 9
I have a huge problem with my webpage (www.icls.ro). It is looking fine in Firefox4 but the elements are not placed in their places in Internet Explorer 9. I suppose it is a CSS compatibility problem. I use the following style.css file:
*{
margin:0px;
padding:0px;
}
img{border:0px;}
html{
width:100%;
height:100%;
background-image:url(images/bg.gif);
background-position:top left;
background-repeat:repeat-x;
}
body{
width:980px;
margin:0 auto;
padding:25px 0 0 0;
}
.logo{
float:left;
margin:0 21px 0 0
}
#menu{
float:left;
margin:0 0 3px 0;
}
#menu li{
list-style-type:none;
float:left;
}
#menu img{
float:left;
}
.links{
display:block;
line-height:23px;
height:23px;
text-align:right;
padding:0 50px 18px 0
}
.links a{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
margin:0 13px;
text-decoration:none
}
.block{
background-image:url(images/block_bg.jpg);
background-position:top left;
background-repeat:no-repeat;
width:238px;
height:251px;
float:left;
padding:46p开发者_如何学JAVAx 0 0 24px;
margin:0 21px 0 0;
/ margin:0 18px 0 0
}
.block p{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#0B3556;
display:block;
width:200px;
padding:0 0 20px 0;
}
#content{
padding:25px 0 35px 0;
overflow:hidden;
}
.line{
width:937px;
overflow:hidden;
border-bottom:1px solid #CEC7B9;
margin:0 0 27px 0
}
.sidebar{
width:238px;
float:left;
padding:0 21px 30px 24px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#545353
}
.sidebar h4{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
color:#040404;
line-height:48px;
}
.sidebar p{
padding:0 0 25px 0
}
.list{
background-color:#FAF3E5;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.list ul{
padding:23px 0 0 25px;
}
.list li{
list-style-type:none;
}
.list span{
color:#105183;
display:block;
float:left;
width:32px;
}
.list p{
display:block;
float:left;
color:#545353;
width:550px;
padding:0 45px 15px 0
}
.news{
padding:23px 0 0 0;
}
.news p{
padding:0px;
}
.news span{
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#105183;
font-weight:bold;
padding:0 0 12px 0
}
.news a{
color:#105183;
text-decoration:underline;
}
.news a:visited{text-decoration:underline}
.news a:hover{text-decoration:none}
.pad25{
margin:0 0 25px 0;
}
.infoblock{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#545353;
width:272px;
float:left;
padding:0 29px 0 24px;
}
.pic{
padding:18px 0;
}
.infoblock a{
color:#105183;
text-decoration:underline
}
.infoblock a:visited{text-decoration:underline}
.infoblock a:hover{text-decoration:none}
.infoblock p{
padding:0 0 30px 0
}
.border{
border-right:1px solid #E8E5DE
}
#footer{
width:980px;
float:left;
background-color:#FAF3E6;
line-height:60px;
height:60px;
padding:0 0 0 25px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#73706A;
}
#footer a{
text-decoration:none;
color:#73706A;
}
#footer a:visited{text-decoration:none}
#footer a:hover{text-decoration:underline}
#content .inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-202px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:12px}
How is this caused and how can I fix it?
Your doctype triggers Quirks Mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
When IE is in Quirks Mode, it's pretending to be IE 5.5.
Change it to this and the problem will be fixed:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Although in most cases, you should just use the HTML5 doctype:
<!DOCTYPE html>
Say hi to Standards Mode.
Relevant information: http://hsivonen.iki.fi/doctype/
加载中,请稍侯......
精彩评论