I'm working on this overlay div that is supposed to cover the whole site so that I can focus the user on a box in the middle without popping up an alert box or something.
So I tried a lot of things and for the moment it looks quiet good (except IE), even when u resize BUT not when u start to scroll (after resizing off course).
So if anyone has an idea or knows this problem, u could help me out.
I've put the css down here, and I've tried to upload the file but I don't if it is going to work that well (I'm just new here)
CSS:
<style type="text/css">
html
{
height:auto;
min-height:100%;
}
body
{
margin:0;
padding:0;
height:auto;
min-height:100%;
}
#container
{
background:#CCC;
width:800px;
height:100%;
margin:0 auto;
}
#bluebox
{
background:#039;
height:400px;
}
#redbox
{
background:#C00;
height:200px;
}
#overlay
{
position:absolute;
min-width:800px;
width:100%;
height:auto;
min-height:100%;
margin:0;
background:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
clear:both;
}
#posbox
{
position:absolute;
float:left;
width:50%;
height:50%;
margin:0 25%;
background:#F00;
visibility:hidden;
}
#whitebox
{
position:relative;
width:200px;
height:100px;
margin:0 auto;
background:#000;
visibility:visible;
margin-top:200px;
}
</style>
css_tricks.html