Most important (and complex) problem is to position some container in the vertical center of long page (with scroller) in IE6.

This is an ultimate solution (at least I think so) and I have to say HUGE THANKS to Vadim Makeev aka Pepelsbey for urgent and completely satisfactory help.

This is code fragment from working site and I have no time to simplify it to some model but it should be helpful.
Task: semitransparent layer on whole page and some notification container in the middle of page (fixed width and height):

Correct CSS:

body, html {margin: 0; padding: 0; background: #fff url(/images/main_back.gif) repeat-x 0 0;}
#overlay_div {opacity: 0.75; height: 100%; width: 100%; background-color: #fff; position: fixed; left: 0; top: 0;}
#confirm_div, #notify_div {border: 2px solid #94D528; border-left: 5px solid #7FBC1C; background-color: #E9F4C9; width: 300px; position: fixed; left: 50%; top: 50%; margin-left: -150px; margin-top: -100px; text-align: center; overflow: hidden; padding: 1em 0;}

IE6 CSS (added via cond. comments):

body, html {background-attachment: fixed;}
/* to prevent flickering on scroll: if you have no background image you should add any, e.g. transparent gif 1x1px */
#overlay_div {position: absolute; height: expression(document.body.offsetHeight); filter: alpha(opacity=75);}
#confirm_div {position: absolute; filter: alpha(opacity=100); margin-top: 0; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +((documentElement.clientHeight-this.clientHeight)/2 ) : document.body.scrollTop +((document.body.clientHeight-this.clientHeight)/2)); /* Special HUGE thanks to Vadim Makeev aka Pepelsbey aka PPSB */

(this solution improvement)


8 Responses to An ultimate solution for IE6 position: fixed problem

  1. Programming Tutorials says:

    Programming Tutorials

    I couldn’t understand some parts of this article, but it sounds interesting

  2. Liz says:

    I just wanted to write to say that you have a great site and a wonderful resource for all to share.

  3. Polaretto says:

    great solution indeed!
    but I’ve done some tests and sadly it won’t work if calculated page length is longer than 32768px! … yes, that’s 2^(16-1), half value of an unsigned 16bit integer.
    And all this just because that rubbish of IE6 doesn’t support alpha on 100% height… f**k it!

    hope this helps somehow…

  4. carnitos says:

    this also worked for me 🙂

  5. Ashok says:

    It works fine.
    Thanks So Much

  6. peter says:


    is any body solve my problem…

    i like to use two background images, one across top, other down side is it possible

    this is my code but its not working ????? 🙁

    body {
    background:url(../images/bg-top.jpg) top repeat-x fixed;
    html {
    background:url(../images/bg-top.jpg) bottom repeat-x fixed;

  7. Yatindra Saxena says:

    @Peter: you can try CSS 3 for this
    body {
    background-images:url(../images/bg-top.jpg), url(../images/bg-bottom.jpg);
    background-repeat: repeat-x;
    background-position: center top, center bottom;

    but the worst thing is it will not work in older browsers. 🙁

  8. ie6 problems says:

    Get out from ie6 problems use following code in body section of your website :