Welcome to WebmasterWorld Guest from 54.196.243.192

Forum Moderators: open

Message Too Old, No Replies

Problem with Opera and transparent div

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

New User

5+ Year Member

joined:Sept 3, 2009
posts: 1
votes: 0


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 Sept 7, 2009 (gmt 0)

Junior Member

5+ Year Member

joined:Nov 16, 2006
posts:64
votes: 0


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

Junior Member

5+ Year Member

joined:Nov 16, 2006
posts:64
votes: 0


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

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members