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> HTML:
Take a look at the below example, simplified from stu nicolls example. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> html {background:#f7f7f7} body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto; background:#f7f7f7;} #content {margin:62px 0 50px 10px; display:block; width:300px; border:1px solid #000; background:#313131; color:#fff; padding:10px;} #head {display:block; top:10px; left:0; width:100%; position:fixed; padding:10px; font-weight:bold; background:#cc0000; color:#fff;} * html #head {position:absolute;} </style> <!--[if lte IE 6]> <style type="text/css"> /*<![CDATA[*/ html {overflow-x:auto; overflow-y:hidden;} /*]]>*/ </style> <![endif]--> </head> <body> <div id="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in lectus sit amet purus tempor pharetra. Aliquam nisi felis, mattis at vehicula ut, suscipit eu metus. Nunc bibendum quam non libero laoreet imperdiet. Donec placerat nisi eget lorem venenatis adipiscing. Integer est massa, iaculis et tempor eget, venenatis vitae velit. Donec sodales sagittis libero, id sodales massa mollis in. Duis in bibendum ipsum. In nibh tortor, rhoncus sit amet adipiscing sed, lacinia nec sem. Vivamus odio lectus, vestibulum id condimentum id, semper sit amet lectus. Mauris eget velit non sem lacinia consequat. Suspendisse sit amet massa at erat faucibus mollis quis a tellus. Vestibulum diam nibh, dapibus a laoreet quis, faucibus a nunc. Quisque ipsum lorem, malesuada quis accumsan at, aliquam non justo. Fusce vitae eleifend neque. Curabitur ultrices ullamcorper urna et rutrum. Suspendisse tortor eros, tempor at porttitor ac, facilisis et nisl. Curabitur eget nulla quis nisi pulvinar convallis.</p> <p>Nullam sodales, erat eget porta scelerisque, purus mi sagittis justo, id mollis quam ipsum vel magna. Donec varius ipsum et odio interdum sodales. Proin ut leo mauris. Phasellus vel convallis nulla. Nulla eget consequat ante. Sed massa odio, vehicula eu malesuada ac, dapibus ut eros. Donec urna odio, fringilla et sagittis sit amet, iaculis eu mi. Aenean eget libero metus, in cursus diam. Curabitur luctus magna eget eros tincidunt blandit. Quisque sed urna urna, sed euismod dui. Cras gravida mi vel ligula dapibus aliquam vulputate enim cursus. </p> </div> <div id="head"> Fixed on the top </div> </body> </html> Code (markup):
Thanks, radiant_luv. But do you have any idea to fix my div#ptcol1, it is different of your the div#head, it is a sub div, and I have many parallel div#col1, the fixed div#ptcol1 is just the child div of div#col1, I couldn't set them position in ie6. can you help me more?