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 au casinos online and some notification container in the middle of page (fixed width and height):
Whatever.
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 */
}
Programming Tutorials
I couldn’t understand some parts of this article, but it sounds interesting
I just wanted to write to say that you have a great site and a wonderful resource for all to share.
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…
this also worked for me 🙂
http://www.howtocreate.co.uk/fixedPosition.html
It works fine.
Thanks So Much
Hi,
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;
}
@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. 🙁
Get out from ie6 problems use following code in body section of your website :