Safari acts weird with opacity? [Archive]

oliver

12-14-2006, 06:29 PM

hey anyone with a mac please check out this code in Safari...

<html>
<head>

<style type="text/css">
#page_screen
{
background-color:#000000;
filter:alpha(opacity=60);
opacity: 0.6;
position:absolute;
top:0px;
left:0px;
width:100%;
height:500px
display:block;
}
</style>

</head>
<body id="page_screen">
Some Text Here
</body>
</html>

it is supposed to make a big block on the screen that is kinda see-thru but it just comes out black. if you put the page_screen id in a div tag it works better but I want it in the body tag. why is it acting so weird?

VIPStephan

12-14-2006, 10:40 PM

You should use a div instead of the body tag itself as this isn't really easy to style (yet). Especially, it's varying from browser to browser, and Safari is one of those that doesn't handle it too good.

Also putting black text and a black background color will result in one big black square even if you set opacity (then it will just be a opaque black square and still no visible text).

Plus: display: block; for a div or the body tag are useless as divs are block-level elements by default and the body is a special case anyway.