Internet Explorer CSS position problem_问答_开发者

开发者 https://www.devze.com 2023-01-20 20:04 出处：网络

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 co

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 CSS position problem

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.