CSS Cross browser tranparency 1

[WizyWyg]

I got some cross browser transparency to work with a Table bg, but now im getting problems with text that appear within that Td cell.

Here is my css:

#submenu {
	background-color: #FFFFFF;
	height: 150px;
	width: 301px;
	/* Mozilla ignores the following */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
	-moz-opacity: 0.40;
}

And here is the table:

<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
            <tr>
              <td><div id=&quot;submenu&quot;>foo foo foo
</div></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
            </tr>
			<tr>
              <td>&nbsp;</td>
            </tr>
          </table>

So, the word FOO now has the opacity of 40% along with the table bg. How can I have it so that the Opacity of the text (or any other element) is not affected by the CSS?

 

[virusdoder]

make i class en use that for your transparency and for other text maybe also a classe. you can swith then

 

[WizyWyg]

Uhm....what did you just post?

 

[virusdoder]

i taught an answord on your question :s

<div class=&quot;name&quot;>foo</div> foo

is this what you want?

 

[WizyWyg]

virus, im sorry but I dont understand what you are posting ( please use correct spelling because you are not making any sense)

what is &quot;answord&quot; ? &quot;taught&quot; - is the past tense of teach.

and what you have does not work (use MY example first before suggesting something else) I need the text inside of the div that makes the background transparent, but with the text being insides, its also being affected by the transparency

 

[stormbind]

afaik, Mozilla does not support DirectX effects.

I think the best you can get is a patterned GIF with transparency. If done well it can give the overall effect of a translucent background for block elements.

Alternatively, maybe shapes drawn in JavaScript can pull off a similar effect but that's kind of tricky imho.

----------
I'm willing to trade custom scripts for... [see profile]

 

[WizyWyg]

that's why there is the -moz-opacity: 0.40; property. It recognizes that.

What i want to do is not make FOO FOO FOO affected by the CSS.

 

[stormbind]

Oh! You want is so that block is transparent but so the text does not inherit the style?

I too have have encountered that problem with DirectX filters in VML

There is no mechanism for this. The filter is inherited and any filters you apply to the text are only added to the inherited filters

afaik, the only this to do is create a new layer positioned as absolute that hovers over the original.

----------
I'm willing to trade custom scripts for... [see profile]

 

[BillyRayPreachersSon]

Changing your DIVs to read:

	<td>
		<div style=&quot;position:relative;&quot;>
			<div id=&quot;submenu&quot;></div>
			<div style=&quot;position:absolute;top:0px;&quot;>foo foo foo</div>
		</div>
	</td>

Works for me.

Hope this helps,

Dan

 

[WizyWyg]

THAT WORKED!! OMG!! THANKS!! THUMBS UP FOR YOU!

 

[stormbind]

Does mozilla have any built in transition effects?

----------
I'm willing to trade custom scripts for... [see profile]

 

[WizyWyg]

If you mean fading, you can do that with Java (

http://www.brainerror.net/scripts_js_blendtrans.php

)

 

[joeyday]

The trick is to make all sub-elements of the div non-transparent. Do the submenu id the way you've already got it, but create another CSS selector like this:

#submenu * {
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
   -moz-opacity: 1.0;
}

The star is a wildcard that applies the style to any child of the submenu div.

So, you can put a paragraph (or another div) inside the transparent div, and it won't be transparent. This gives more flexibility because it prevents you from having to use absolute positioning.

Hope this has been helpful.

 

[GUJUm0deL]

Just out of curiousity what's the difference b/w using # and .?? Which is better to use, and when??

Thanks.


____________________________________
Just Imagine.

http://www.imajinarts.com

 

[BillyRayPreachersSon]

joeyday,

Putting a main DIV at 40%, and then a sub-DIV of that to be 100%, would render the sub-DIV at 100% of 40%, thus making it 40%.

AFAIK, you cannot block the inheriting effect of transparency filters.

Dan

 

[ChrisHirst]

using &quot;#&quot; for the style it will be applied to the element with that id

so <tag id=&quot;thisone&quot;>
will have the style of

#thisone {
atttribute:value;
}

where &quot;.&quot; is assigned using class=

<tag class=&quot;thisone&quot;>

will have this style

.thisone {
attribute:value;
}

when using id and &quot;#&quot; , the ids should be unique on each page, so only one element can use that style. With class and &quot;.&quot; many different elements can have the same style applied.



Chris.

Indifference will be the downfall of mankind, but who cares?

 

[GUJUm0deL]

Hi, so does that mean when using &quot;#&quot; the style can only be called when using that one specific ID name?? And when using &quot;.&quot; it can be called whenever that tag is being called??

Thanks.


____________________________________
Just Imagine.

http://www.imajinarts.com

 

[ChrisHirst]

yep that about sums it up.

The reason being is that DHTML and javascript use the ID for referencing the element.

And of course the same style class can be applied to different tags
eg:
<div class=&quot;style1&quot;>
<span class=&quot;style1&quot;>
<td class=&quot;style1&quot;>



Chris.

Indifference will be the downfall of mankind, but who cares?