postion:fixed problem in IE6.

I have searched many articles, that ie6 could not support postion:fixed, and maybe set position:absolute and top position. But I tried many times in my code and still can not work well, it makes me headache. Can anyone help me to modify my code for me? Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
html, body{width:100%;height:100%;margin:0;padding:0;background-color:#fff;} 
#headerwarp{width:100%;height:78px;margin:0;padding:0;position:fixed;left:0;top:0;z-index:10;} 
#headertop{width:100%;height:28px;margin:0;padding:0;background-color:blue;position:fixed;left:0;top:0;z-index:10;} 
#headerbottom{width:100%;height:50px;margin:0;padding:0;background-color:green;position:fixed;left:0;top:28px;z-index:10;} 
#footerwarp{width:100%;height:53px;margin:0;padding:0;position:fixed;left:0;bottom:0;z-index:10;} 
#footerbottom{width:100%;height:65px;margin:0;padding:0;background-color:#000;z-index:10;} 
#localcontent{width:100%;margin:0;padding:78px 0 105px 0;top:0;} 
#content1{position:fixed;width:100%;height:20px;margin:0;padding:0;background-color:#ff0;z-index:10;top:78px;} 
#content2{position:fixed;width:100%;height:25px;margin:0;padding:0;background-color:#f00;z-index:10;top:98px;} 
.box{width:100%;position:relative;top:45px;padding:0;margin:0;} 
.slide {margin:10px;} 
.sl{width:100%;} 
li{margin:0 0 5px 0;padding:0;list-style:none;} 
ul li,li{width:400px;overflow:hidden;position:relative;} 
.contenttop{height:25px;position:fixed;z-index:10;top:123px;padding:0;margin:0;width:290px;background-color:#0FF;} 
.contentbottom{width:400px;float:left;padding:0;margin:0;height:1000px;} 
.col1, .col2, .col3{float:left;padding:0;margin:0 3px 0 3px;} 
.pcol1, .ptcol1{float:left;margin:0 0 6px 0;} 
.ptcol1{text-align:center;font-size:14px;color:#222;font-weight:bold;padding:0;position:fixed;z-index:10;top:148px;background:#f00;} 
.pcol1{padding:2px;position:relative;top:30px;background:#ff0;} 
.col1, .ptcol1{width:139px;} 
.pcol1{width:135px;} 
</style> 
</head> 
<body> 
<div id="headerwarp"> 
 <div id="headertop"> 
    </div> 
    <div id="headerbottom"> 
    </div> 
</div> 
<div id="localcontent"> 
        <div class="box"> 
         <div id="content1"> 
            </div> 
            <div id="content2"> 
            </div> 
            <div id="sl"> 
                <ul class="ul" style="z-index:1;"> 
                    <li class="li"> 
                     <div class="contenttop"> 
                          content 
                        </div> 
                        <div class="contentbottom"> 
                            <div class="col1"> 
                             <div class="ptcol1"> 
                              content1 
                                </div>                                 
                                <div class="pcol1"> 
                                111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/> 
                                </div> 
                            </div> 
                            <div class="col1"> 
                             <div class="ptcol1"> 
                              content2 
                                </div>                                 
                                <div class="pcol1"> 
                                111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/> 
                                </div> 
                            </div> 
                        </div>                         
                    </li> 
                </ul> 
            </div> 
        </div> 
</div> 
<div id="footerwarp"> 
 <div id="footerbottom"> 
    </div>     
</div> 
</body> 
</html>

youlichika

Light Poster

31 posts since Nov 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

Ever heard of ie7.js? Have a look at this:

http://code.google.com/p/ie7-js/

It should sort out most bugs and make ie6 reasonably compliant.

diafol

Rhod Gilbert Fan (ardav)

Moderator

7,795 posts since Oct 2006

Reputation Points: 1,170

Solved Threads: 1,080

1 Year Ago

IE6 currently has a market share of between 4 - 6% of the browsers used world wide...

drjohn

Posting Pro in Training

445 posts since Mar 2010

Reputation Points: 76

Solved Threads: 80

1 Year Ago

Hi ardav: I have not heard ie7.js before. I add the script into my page, but it was not worked. how to use it in my position:fixed? can you help me more? Thanks.

youlichika

Light Poster

31 posts since Nov 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

As it happens, I haven't used it, just seen loads of good reviews about it. I don't support IE6 in my sites any more and have actively campaigned to kill it off. Through providing solutions and workarounds for IE6 users, we're extending its lifespan. Perhaps that's a bit mean for those who can't upgrade, but IE6 is a pig.

http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/

diafol

Rhod Gilbert Fan (ardav)

Moderator

7,795 posts since Oct 2006

Reputation Points: 1,170

Solved Threads: 1,080

1 Year Ago

Ok,ardav, thanks. I will read more carefully about the ie7.js, maybe it can...

youlichika

Light Poster

31 posts since Nov 2010