Welcome to WebmasterWorld Guest from 54.147.217.76

Forum Moderators: open

Message Too Old, No Replies

Problem with Opera and transparent div

   
5:28 pm on Sep 3, 2009 (gmt 0)

5+ Year Member



The HTML

<div class="transparency">
<a href="index.html"><img alt="" src="header.png" width="800" height="120" border="0" /></a>
</div>

The CSS

.transparency {
font: 13px Lucida, Verdana, sans-serif;
text-align: center;
color: #ffffff;
width: 800px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background-color: #000000;
opacity: 0.80;
filter:alpha(opacity=80);
}

The Results

Firefox, IE8, Safari, Chrome: Good Result

Opera: Bad Result

Seems that the image does not inherit the transparency from div in Opera (version 10) żAny ideas?

[edited by: tedster at 9:25 pm (utc) on Sep. 3, 2009]
[edit reason] no screenshots, please [/edit]

10:34 am on Sep 7, 2009 (gmt 0)

5+ Year Member



This works for me with some random png I tested with. Image specific?
10:38 am on Sep 7, 2009 (gmt 0)

5+ Year Member



Btw, I tested with the latest released version: Opera 10.0
11:26 am on Sep 7, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there garlik,

Opera does apply opacity to the image but appears to set different values.

If you use a border:10px solid #000 instead of padding:10px and background-color:#000,
you will see that the image opacity is identical to Firefox et al. ;)


.transparency {
font: 13px Lucida, Verdana, sans-serif;
text-align: center;
color: #ffffff;
width: 800px;[red]
/*padding: 10px;*/[/red]
margin-left: auto;
margin-right: auto;[red]
/*background-color: #000000;*/[/red][blue]
border:10px solid #000;[/blue]
opacity: 0.8;
filter:alpha(opacity=80);
}


Why Opera does this is a mystery to me.
Perhaps their forums may shed a light on it.

birdbrain