Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Cincinnati, OH
    Posts
    545
    Thanks
    0
    Thanked 0 Times in 0 Posts

    transparent text

    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.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Beyond Lament
    Posts
    424
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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);
    }


    Quíet Storm Designs ~ Art is not what you see, but what you make others see.
    · the Storms· || ·Ultraviolent Winter· || ·Was Einstein Wrong?· || ·It´s About Time!·

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Beyond Lament
    Posts
    424
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Opacity will not work in IE without a width assigned.
    Quíet Storm Designs ~ Art is not what you see, but what you make others see.
    · the Storms· || ·Ultraviolent Winter· || ·Was Einstein Wrong?· || ·It´s About Time!·

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...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 [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Cincinnati, OH
    Posts
    545
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks. I will have to try it out tommorrow.

  • #7
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post
    For Mozilla,

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

    DOM reference:
    oObject.style.MozOpacity = "60%";
    Zvona
    First Aid for
    Web Design

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You should use -moz-opacity:0.6; instead,because otherwise it will use 60% of the parents opacity which could give strange effects.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •