page getting pushed up

[rondog]

I am making an overlay window and in IE6 and 7 when it comes on my page shifts up. It works fine in firefox and IE8.

 

Here is the link

http://ronnieswietek.com/cc/modal/

 

here is my css..dimm is the overlay

body {
height:100%;
padding:0px;
margin:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background-image:url('../images/pattern.jpg');
}

li
{
list-style-image: url("../images/bullet2.gif");
}

#wrapper {
width:850px;
background-color:#E6E6E6;
margin:15px auto;
}

#content {
width:800px;
margin:0px auto;
padding:15px;
}

.aLink {
text-decoration:underline;
}

.aLink:hover {
cursor:pointer;
}

.dimm {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display:block;
background:#000;
}

 

anyone know whats up here? I suck at css

[RussellReal]

in older versions of IE with an element with a position of absolute is completely ripped of the page, then placed back at the top left of the page, unless the containing div is also relatively positioned then it will be positioned or fixed to teh top-left portion of that div or container.. however, that is all normal to most browsers, the problem with older IE is not how it positions it, but your overlay will assume 100% of the height of the document not the height of the height of the affective area. understand? if your page is 1000px tall.. and your browser has only 700px of space to browse thru, than your div stretched 100% tall will stretch 1000px tall..

 

your best bet is to simply open the overlay like you're doing, give it a FIXED height and FIXED width, then putting that inside another div stretcting 100% wide then centering it inside there, and then giving the contained dim effect a top: value of like 100px; just to pull it off the top of the border.