Css Inheritance

[natimage]

Here's a problem I've been working with all morning. Not sure there is a fix, though. I've searched Google and read tons of stuff to no avail.

 

I'm using CSS opacity to make a table cell background transparent. I then nest a table inside that table cell, and put text into the newly nested table. Well, the text in the new table inherits the opacity value. But I don't want the text to be transparent like the background. I want it to have full color.

 

Here is the code:

 

CSS

>#headRight {
background-image: url(images/headerRightBG.gif);
background-repeat: repeat-x;
background-position: right bottom;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#smallNavLinks {
font-family: "Trebuchet MS", Arial;
font-size: 10px;
font-weight: bold;
color: #003366;
text-decoration: none;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;
}

 

HTML

><td height="77px" align="right" valign="bottom" id="headRight">
     <table width="310" border="0" cellspacing="0" cellpadding="0" style="position: relative">
    	 <tr>
       <td width="46" align="center">
      	 <a id="smallNavLinks" href="http://www.harmonymedical.co.uk">HOME</a></td>

 

The opacity rules in #smallNavLinks set the opacity according to that of the parent element. Therefore, 100% = 50%, since the parent element has an opacity of 50%.

 

There is a workaround for this in IE, but I can't fix it in Mozilla. If anyone has any ideas...???

 

I hope I explained it properly. It's not an easy problem to put words to!

 

Thanks,

[borfast]

That's an interesting problem you've got there, Tracy.

 

I don't know the answer (yet) but I'll think about it, search the web and I'll let you know if I come up with something.

 

EDIT: this is just something that popped into my head and to be honest, I don't think it'll work but have you tried setting the opacity to 2.0 (2x0.5 = 1)?

 

EDIT 2: What's the workaround for IE? Perhaps if I see that I can think of something similar.

Edited September 17, 2004 by TCH-Raul

[natimage]

EDIT: this is just something that popped into my head and to be honest, I don't think it'll work but have you tried setting the opacity to 2.0 (2x0.5 = 1)?

 

EDIT 2: What's the workaround for IE? Perhaps if I see that I can think of something similar.

Thanks for looking into it, Raul. I have tried your first idea and it doesn't work. Tried 2, 9, 10, 100...nothin'!

 

The workaround for IE is to set style="position: relative". No clue why!!!

 

Thanks again!

[borfast]

Humm... that workaround is a bit strange... I'd say it takes advantage of one of IE's CSS bugs

 

I've been thinking about this but I can't come up with a solution... :\

[natimage]

Thanks for thinking about it, Raul. If I come up with a solution, I'll post it.

[borfast]

Well, after some serious searching on the web and asking a few CSS geeks about this, I concluded that it's impossible to do what you want. The transparency is inherited and that's it. There's that IE workaround and I've seen something about a Safari workaround that used to work on older versions but nothing for Mozilla, since it strictly follows W3's standard on this matter.

 

The only way I can think of is to use absolute positioned elements. Have you tried that? It may or may not be possible, depending on the layout you're working with but it's the only way that comes to my mind.

[natimage]

Yeah...I figured that would be the only way to do it. But, I really have not mastered css absolute positioning with all the browsers yet. I'm still waiting to hear back from the client...we'll see what they want. Thanks again! I think the W3's standard on opacity inheritance needs to be tweaked a little to allow breaking the inheritance with a "none" value like you can do with other things. But...who am I to say???!!!

[borfast]

You're a web developer who wants to work instead of wasting countless hours thinking of a way to get around the limitations imposed by a part of a standard that wasn't well thought.

 

And you're not alone, while I was searching for a solution for the problem, I saw hundreds of messages about the very same issue, so I hope W3C addresses this with CSS 3 (or revision of CSS 2).

[mRRRc]

But I don't want the text to be transparent like the background. I want it to have full color.

 

Hello,

after spending all night online trying to solve the problem -with only minimal knowledge of css!-, I've got the next really simple solution:

 

(I didn 't use an external stylesheet, but anyone who can explain to me how it works is welcome)

 

-build 2 tables which exactly overlap each other. The magnificent 'z-index' makes that possible. Make the first table the one with transparency:

 

><div id="layer1" style="position: absolute; top: 8px; left: 0%; width: 99%; height: 100px; z-index: 1; border: 0px solid gray; color: #CC0066">

 <table width="80%" cellspacing="2" cellpadding="2" border="2" align="center">
   <tr>
     <td style="filter: Alpha (Opacity=50); -moz-opacity: .5;" bgcolor="#EBAAA5" width="50%" height="40"></td>
     <td style="filter: Alpha (Opacity=50); -moz-opacity: .5;" bgcolor="#EBAAA5"></td>
   </tr>
 </table>

</div>

<div id="layer2" style="position: absolute; top: 8px; left: 0%; width: 99%; height: 100px; z-index: 2; border: 0px solid black;">

 <table width="80%" cellspacing="2" cellpadding="2" border="2" align="center">
  <tr>
    <td width="50%" height="40"><font face="verdana" size="2"><b>Oh, this is fantastic!</b></font></td>
    <td><center><font face="verdana" size="2"><b>This works for Firefox and IE.</b></font></center></td>
  </tr>
 </table>

</div>

 

the first layer 'layer1' with z-index 1 contains background transparency settings for Firefox & Mozilla (-moz-opacity: .x) and for IE (filter: Alpha (Opacity=xx)).

the 2nd layer 'layer2' with z-index 2 comes on the foreground. It contains everything you want to be at 100% opacity, like text which must be readable.

Of course, add a background image to see the stunning results better!

 

a working version can be seen at good guitar chords in Word

 

hope to have helped you out!

[TCH-Bruce]

Welcome to the family and forums.

 

Thanks for sharing.

[mRRRc]

Welcome to the family and forums. 

 

Thanks for sharing. 

<{POST_SNAPBACK}>

 

No problem! I like it. I just hope the man 'natimage' reads it!

[borfast]

Welcome aboard, and thanks for sharing your solution to the problem!