Postion:fixed problem in IE6

HTML & CSS
1

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>
2

Can you maybe tell us what it is exactly what you would like? I tried to go through your styles and html but in the CSS I lost the plot in this part


.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;}

and in the html it was not much better! In the css you declare all kind of rules double where combining rules would do the trick. For example you have your #headerwarp, #headertop and #headerbottom like this


#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;}

As you can see are all properties nearly the same, so you could easy combine at least the #headertop and headerbottom like


#headerwarp{
	width:100%;
	height:78px;
	position:fixed;
	left:0;
	top:0;
	z-index:10;
} 

#headertop,
#headerbottom {
	width: 100%
	height:28px;
	background-color:blue;
	left:0;
	top:0;
}
 
#headerbottom{
	height:50px;
	background-color:green;
	top:28px;
}

Since the #headerwarp already has a fixed position you don’t have to apply that property to the #headertop and header bottom as well. The same goes for the footer. You use the #footerbottom inside #footerwarp and except for the hight the properties are the same. So instead of


#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;}

You could just do with one of the two


#footerwarp{ 
	width:100%;
	height:65px;
	position:fixed;
	left:0;
	bottom:0;
	z-index:10;
	background-color:#000;
}

Like I said after these parts I lost track of your CSS.

Coming to your html. You declare rules that doesn’t exist like


<ul class="ul" style="z-index:1;"></ul>

<li class="li"></li>

Again try to explain what it is you want and try to clean up the markup somehow because they way it is now It is never going to work

3

Hi donboe, thanks for your pointed. Yes, my css is very poor.
My total code size is 30k. I shorted most of them for ask a help. #headertop, #headerbottom #footerbottom have some nav menu in them.
The effection what I need is the code which I posted and watch better in ie8. I also want this effection in ie6. I think my difficulty is hard to set position of ptcol1, at least I couldn’t…