transparent text

[allida77]

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]

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]

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

::] krycek [::

[Quiet Storm]

Opacity will not work in IE without a width assigned.

[krycek]

...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]

thanks. I will have to try it out tommorrow.

[Zvona]

For Mozilla,

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

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

[Bosko]

You should use -moz-opacity:0.6; instead,because otherwise it will use 60% of the parents opacity which could give strange effects.