How do I make a child DIV element disregard

it's parent table cell CSS values?

[Ashton]

For example:

<table>
<tr>
<td style="filter: alpha(opacity=20)">
<div style="filter: alpha(opacity=100)">
Some Random text
</div>
</td>
<tr>
</table>

The text displays at 20% opacity instead of 100%. Is there any way to escape the <td>'s style settings using a div tag? If there's another option other than a div tag, I'm willing to give that a try as well.

(note: I need an option OTHER THAN changing the "position" CSS value)

[MWpro]

I think using filters to do this seems awkward... I don't really like filters and in my experience they cause the page to lag a bit.

Have you considered using a lighter color of gray, like #DCDCDC? This color is almost identical to your filter color.

Consider this:
.light {
color: #DCDCDC;
}
p {
color: #000;
}

<table>
<tr>
<td class="light">
Some Random text
<p>
more random text
</p>
</td>
<tr>
</table>

[Ashton]

I'm not trying to get a lighter colour of grey on the text, this was just being used as an example. The opacity will be applied to my entire table cell (which includes images and the table background colour).

I just need to know if it's possible to make the table cell transparent and have the text fully opaque (possibly enclose it in a tag of some kind, like a DIV tag?) WITHOUT using the "position" CSS value.

[Ashton]

After more than 8 hours of reading through CSS specs, trying different things, etc... I managed to find a workaround to my problem (using "position: relative" on a few elements). Thanks to everyone for their suggestions ;). It would appear that the ONLY way to get nested DIVs to display an opacity higher than it's parent is to use "position: relative".

[Ashton]

I've posted something similar to this question a little while ago... This is a more direct example of what I'm looking for.

Ok here's the code:

<td width="500">
<div style="width: 50%;">
<div style="width: 100%;">
The text goes here
</div>
</div>
</td>

Is there ANY way for me to make the 2nd DIV width 100% of the TD tag (in this case, 500px) instead of 100% the width of the DIV tag that it's under (in this case 250px, 50% of the TD).

**NB** -- I KNOW this is a stupid way to do this example. This is ONLY an example. The actual code I want to apply this to is too long to post here. I'm just trying to get a DIV tag to take the percentage from somewhere other than the parent element that it's directly under.

[SuzyUK]

Ashton I saw your previous thread and was a bit overawed by the opacity thing,

<table>
<tr>
<td style="filter: alpha(opacity=20)">
<div style="filter: alpha(opacity=100)">
Some Random text
</div>
</td>
<tr>
</table>

However now I think I see what you're getting at and your first example is proably better to explain with.

It's inheritance I think..

So the td opacity is set to 20 (I presume this is percent) then the nested div is set to opacity 100(%) which means it's going to be 100% of it's parent therefore 100% of 20 equals 20 so it still appears as 20.

If you want it to actually be set to 100(%) you will need to set the div to opacity = 500(%) (is that even possible? I'm talking theoretically here ;))
so that 500% of 20 = 100..

You can't get the child to stop inheriting from its parent but you can use the inheritance.

I hope this helps... and before someone tells me that's not the way to use opacity I know nothing about it, It's the issue that I'm trying to resolve ;)

Suzy

[MWpro]

Great post Suzy, I couldn't figure out the 20 and 100 thing but you nailed it.

Instead of trying to work around inheritance, use it for your advantage.

[Ashton]

Unfortunately, putting "opacity=500" doesn't work. The CSS specs REALLY need an alpha value =/

But there's good news! After more than 8 hours of reading through CSS specs, trying different things, etc... I managed to find a workaround to my problem (using "position: relative" on a few elements). Thanks to everyone for their suggestions ;). It would appear that the ONLY way to get nested DIVs to display an opacity higher than it's parent is to use "position: relative".