Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: IE Transparency Issue

Bottom of Page

1 to 11 of 11

  1.  
  1.  permalink
    I've created a box in css with a level of transparency. This box contains text. In FF, the white-colored box is transparent but nothing side of it. In IE, everything is transparent. Is there a workaround for this? Thanks.

    E.
    • CommentAuthorGustavs
    • CommentTimeJul 14th 2006
     permalink

    You can fix it with:

    <a href=“http://homepage.ntlworld.com/bobosola/”>Javascript</a>
    <a href=“http://koivi.com/ie-png-transparency/”>PHP</a>
    <br />
    and if you want to use a png as background-image in css you can use this <a href=“http://www.allinthehead.com/retro/69”>Javascript</a>

  3.  permalink
    The problem is not relating to png but rather just a transparency in the css. Everything I have in div is transparent including text when all I want is the background color to be transparent. In FF, it works but not IE. Does anyone have any advice?
    • CommentAuthorGustavs
    • CommentTimeJul 15th 2006
     permalink

    Can you show the code you’ve written?

  5.  permalink
    I didn't have any problems with both the text and background being transparent, but I did notice that IE seems to require a width for transparent elements. I'll post an example of that in an hour or so.
  6.  permalink
    Okay... Apparently I can't figure out how to display white text on a partially transparent, white background, for example. The problem wasn't there with black text, but it looks like textual content inherits the backgrounds transparency. Ideas, anyone?
  7.  permalink
    •  
      CommentAuthorpremii
    • CommentTimeJul 15th 2006 edited
     permalink
    When you apply opacity to a node, all child nodes including text node will inherit opacity and you can not overwrite it.

    one way to solve is to use semi transparent png background (Use Filter for IE6)

    or you can use absolute position semi transparent empty div

    HTML
    ====
    <div id="content">
    <div class="transparent"></div>
    <p>asfasdfas asd fas fas das vasasfasdf s as</p>
    </div>

    CSS
    ===
    #content{position:relative;}
    .transparent{position:absolute; top:0; bottom:0; left:0; right:0; background:#fff; opacity:0.75}
    •  
      CommentAuthorfake
    • CommentTimeJul 16th 2006
     permalink
    "you can use absolute position semi transparent empty div"

    ooh, how come I never thought of that! I flushed a design down the drain because I had transparent text...
  10.  permalink
    Stu Nicholls has some nice examples, as usual: http://www.cssplay.co.uk/opacity/png.html

    The original problem seems to be a mystery still. It would be nice to know if or when something is solved. The inherited transparency is explained in the CSS2 specification, but I thought I'd give it a try anyway. Just in case it had to be done that way - but no luck, though.

    CSS transparency feels a bit too heavy when used excessively, so I'd rather use images.
  11.  permalink
    http://www.estevancarlos.com/blink/
    http://www.estevancarlos.com/blink/main4.css

    I think the problem is a bit different than how i originally proposed. the text is transparent in both browswers. I had the opacities different for IE and FF and so I didn't notice the text being affected in FF. I will try that semi-transparent empty div though. Should that work in both browsers?

1 to 11 of 11

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page