...

View Full Version : transparent text



allida77
12-12-2002, 10:58 PM
If I add the class:

.ctrlsCols{
font-size: x-small;
font-weight : bold;
color:#4682B4;
filter: alpha(opacity=60);
}

to a <td> then the text inside the cell will be transparent, however if I try:
<span class=ctrlsCols>foo foo word</span>
<div class=ctrlsCols>foo foo word</div>
then the text is not transparent. Is the only way to have transparent text is inside a table.

cross browser compatibility is not needed.

Quiet Storm
12-13-2002, 01:22 AM
You have to assign a width size for it to work.


.ctrlsCols{
font-size: x-small;
font-weight : bold;
color:#4682B4;
width:75px;
filter: alpha(opacity=60);
}


:)

krycek
12-13-2002, 01:39 AM
well, it depends on whether you are being 'strict' or not.

According to the W3C standards, inline elements cannot have dimensions or positioning. To apply these you have to use a block element (or make the element display as block) or else use absolute (or else fixed) positioning.

That's just in case you run into problems, I know you said you are not worried about x-browser, however it is useful to know for future reference.

So, basically use a div, not a span :D

::] krycek [::

Quiet Storm
12-13-2002, 01:44 AM
Opacity will not work in IE without a width assigned.

krycek
12-13-2002, 03:03 AM
...I am not disputing that!

I am just pointing out that to be valid, only block elements or absolutely positioned elements can have dimensions and positioning.

If you don't believe me, check out the W3C or else simply load the page in Mozilla. (By the way, Mozilla supports transparency so you can still acheive the same effect).

So, like I said before, use width on divs but not spans, because that would be invalid.

Which means only apply your transparency effects to a div that has its width specified, if you want it to work AND be valid.

::] krycek [::

allida77
12-13-2002, 03:48 AM
thanks. I will have to try it out tommorrow.

Zvona
12-14-2002, 12:43 PM
For Mozilla,

CSS-property:
-moz-opacity:60%;

DOM reference:
oObject.style.MozOpacity = "60%";

Bosko
12-14-2002, 01:57 PM
You should use -moz-opacity:0.6; instead,because otherwise it will use 60% of the parents opacity which could give strange effects.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum