Internet Explorer CSS position problem
I'm new to CSS, so this question maybe is stupid, but...
I have a web page (the code below is a simplification), where I put some structure and a css for positioning. If you look, in the code the content comes before the headers (not the html headers, the "pages menus"), but with CSS I put that menus on top of the page. So, basically, what you see is different a what Google see. Why? because I want that Google could see immediately the content (I read that could improve your chances of been correctly indexed) That works perfectly in Firefox, Opera, Safari, Chrome... but doesn't work in IE7 and IE6.. :( In this browsers, even if the "pages menus" are show on t开发者_高级运维op, they appear in the right, destroying completly the layouy of the page
HTML CODE
<body id="body">
<div id="main-block">
<div id="content" >
<!-- Here comes the content -->
</div>
<div id="rigth-col">
</div>
</div>
<div id="footer" >
<p>Footer</p>
</div>
<div id="index_header" class="">
</div>
<div id="middle-block">
<!-- Middle Content -->
</div>
</body>
CSS CODE
body {
line-height:1.5;
margin-left: 120px;
width: 1024px;
height: 100px;
}
#main-block{
margin-top: 360px;
width: 1024px;
float: left;
}
#content{
border:3px double #CCCCCC;
height: 865px;
width: 700px;
float: left;
}
#rigth-col{
float: left;
width: 310px;
height:865px;
border:3px double #CCCCCC;
}
#middle-block{
clear: both;
position: absolute;
top : 195px;
width: 1024px;
height: 150px;
}
#footer {
float:left;
margin-top:20px;
width:1024px;
border:3px double #CCCCCC;
}
#index_header{
clear: both;
position: absolute;
top: 20px;
width: 1024px;
}
Internet Explorer, especially the earlier versions, can be very sensitive to the order in which your floated elements appear.
I think you might be misled about having the content at the top to help Google - it's certainly not common practice among sites with good rankings. Given that, if you rearrange your page into a more logical order, it should make dealing with Internet Explorer's fun little quirks a little easier.
If that doesn't help, check that IE isn't calculating/setting the size of your divs incorrectly - if they started to bump up against each other that would probably cause a faulty layout.
加载中,请稍侯......
精彩评论