#fixed {
border:1px solid red;
height:100px;
left:50%;
margin-left:-500px;
position:fixed;
top:0;
width:1000px;
}
how can i make this element display the same way in IE6? the div is the first element directly in the body regards
IE 6 doesn't support position: fixed (Source) and there is no easy CSS-only workaround as far as I know.
You would need to employ a JavaScript based workaround solution that adjusts the element's position when the page gets scrolled.
There's a very simple solution outlined in this SO question. Those JS based solutions tend to be pretty jiggly and jerky in my experience, they are nowhere near the smoothness of position: fixed.
Sorry don't have time to translate my sample with your exact requirements but take inspiration with those code :
// Modern browser : FF, Chrome, Opera
// ----------------------------------------
#fixmetoo { position: absolute; right: 0px; bottom: 0px; }
div > div#fixmetoo { position: fixed; }
// IE6
-------------------------------------------
<!--[if lt IE 7]>
div#fixmetoo {
right: auto; bottom: auto;
left: expression( ( -80 - fixmetoo.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( -100 - fixmetoo.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
<![endif]-->
Hum, you could try this css - then the element is centered.
<!--[if lt IE 7]>
<style type="text/css">
#fixed {
margin: 0 auto;
}
</style>
<![endif]-->
