Hi all, I am having a problem with a div. I start off with this code: <div id="popin" style="display:none;"> <a href="javascript:void(0);" onclick="Effect.Fade('popin');"><img src="close.gif" class="close" width="22" height="22" alt="Close" border=0 /></a> <div id="popintext">Make your visit count! <a href="/myaccount/?request=Login">Login</a> or <a href="/?request=Signup">Signup</a></div> </div> Code (markup): and this corresponding CSS: div#popin { position: absolute; left: 320px; top: 10px; color: black; font-weight: bold; width: 400px; padding: 5px; background: #FAF9F7 url(/img/inline-warning.gif) 0 0 repeat-x; border: 1px dashed #A09D97; z-index: 5; } Code (markup): And some javascript that displays the div. This all works fine, but I can only display the div in the absolute position shown above. But because people scroll down, sometimes you get in a situation where you should see the div but it is way up at the top of the page. I would like it to popup in the middle of the screen wherever you are on the page, but so far have only succeeded in bashing the wall with my head. I have the div at the bottom of my code because I don't particularly want search engines to see it first, and when I do anything other than absolute positioning it just sits at the bottom of the page. Any help is appreciated.
What you want is position:fixed - problem is there is no such thing in IE6/earlier. There is a trick you can use that can be fed to all browsers which 'kind of' emulates position:fixed though. The following shows this in action: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled</title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; overflow:hidden; } #scroll_container { height:100%; overflow:auto; } #fixed_box { position:absolute; top:50%; left:50%; width:320px; height:240px; background:#EEE; border:1px solid #000; margin-left:-160px; margin-top:-120px; text-align:center; line-height:240px; } </style> </head><body> <div id="fixed_box"> <p>Some test content</p> </div> <div id="scroll_container"> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> <p>Whole bunch of lines so we can see the scroll</p> </div> </body></html> Code (markup): First we force the body and HTML to 100% height and overflow:hidden, removing any chance of scrollbars showing up in IE (a quirk of IE in standards mode is by default you have scrollbars that won't go away) Then we make an inner container of that same fixed height, but with overflow:auto - this means scrollbars will automatically appear. Because anything outside the inner container would be positioned NOT to the scrollbar, but to our scroll-less body, position:absolute on elements OUTSIDE #scroll_container now works as if set to position:fixed. We don't even need to mess with z-index because absolute elements always render atop static ones. Hope this helps.