PDA

View Full Version : Help with Div Overlay (kind of like lightbox)



rondog
Oct 22nd, 2008, 07:41 PM
I am having a problem in firefox and safari where the overlay gets created, but if you scroll down, the overlay has only covered the visible screen. So in other words the overlay div stops halfway down the page. However in IE it covers up the entire page no matter how much scrolling is required. Here is my code:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>newCourse</title>
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#bgholder {
background:url("images/bg.jpg") repeat-x;
}

.fader {
display:none;
position:absolute;
top:0;
left:0;
width:100&#37;;
height: 100%;
background-color: #000;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
</style>
</head>
<body>
<div id="bgholder">
<div id="black" class="fader" onClick="document.getElementById('black').style.display='none';"></div>
<div align="center" id="player">
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("newCourse.swf", "vforum", "900", "370", "9", "#ffffff");
so.addParam("allowfullscreen", "true");
so.write("player");
// ]]>
</script>
</div>
<a href="javascript:void(0)" onClick="document.getElementById('black').style.display='block';">asd</a>
</div>
</body>
</html>

itsjareds
Oct 23rd, 2008, 02:03 AM
Almost 100% positive this is a problem with your height: 100% problem. Try resizing your browser to a smaller width and then scroll horizontally. Does the same thing happen?

rondog
Oct 23rd, 2008, 09:37 PM
Almost 100% positive this is a problem with your height: 100% problem. Try resizing your browser to a smaller width and then scroll horizontally. Does the same thing happen?

Its not an issue of width wize..its vetically..firefox and safari cover the viewport, whereas IE covers the whole document. I removed the height of 100% and then nothing showed up