Re: Background color not 100% high!



Oops wrong group!


"Yauw" <wow@xxxxxxx> wrote in message news:OoaPg.1159$wU4.988@xxxxxxxxxxx
Can someone figure out how I can get the background color to not stop
short at the bottom of the page when an image longer than the viewable
screen is displayed?! Woks great if the image is small though (in Firefox
anyway).

Thanks


<html>
<head>
<style type="text/css">
.translucent
{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
background-color: rgb(213, 200, 156);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
z-index: 10001;
}

</style>
<script>
<!-- Begin
function toggle(id)
{
if ( document.getElementById)
{
var layer = document.getElementById(id);
layer.style.display = (layer.style.display == 'none') ? 'block' : 'none';

if (id=='logo')
{
var b= document.getElementById('btnClose');
b.style.position = "absolute";
b.style.top=0;
b.style.left=parseInt(b.offsetParent.offsetWidth) -
parseInt(b.offsetWidth);

}
}
}

// End -->
</script>
</head>
<body>
<center>
<a href="#" onclick="toggle('blockUI');toggle('logo');">Click to
enlarge</a>

<div id = "logo" style="display:none; position: absolute; left: 200px;
top: 100px; z-index: 55000">
<a id="btnClose" href="#" onclick="toggle('blockUI'); toggle('logo');
"><img src="/images/close.gif" border="0" /></a>
<img src="/images/400x650.jpg" border=0 alt="" />
</div>

<div id="blockUI" class="translucent" style="display: none;
width: 100%; height: 100%; position: absolute; left: 0px; top:
0px; z-index: 50000;"
onclick="return false" onmousedown="return false"
onmousemove="return false"
onmouseup="return false" ondblclick="return false">
</div>
</center>
</body>
</html>



.