Results 1 to 5 of 5

Thread: Opacity issues firefox vs ie

  1. #1
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Opacity issues firefox vs ie

    I'm attempting to use the opacity in css for the first time.
    I have a div (contenttransparency) a background color set with a transparency set to 50% with a z-index of 100.
    I had a second div (content) inside the first div with the opacity set to 100%. It has a z-index of 500.
    These are both on top of another div (not shown) which has a background image. I'm trying to fade out the background image.
    This works in IE in that get full transparency for the inside div but not in Firefox which still keeps the opacity from the first div. Hope this makes sense.
    Why doesn't the content div opacity override in firefox.

    Here's the html:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Artist</title>
    <link href="styles1.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div id="contenttransparency">

    <div id="content">
    <h3>Welcome</h3>
    <hr />
    <p>This is my text content.</p>
    </div>

    </div>

    </body>
    </html>


    This is the CSS.

    /* This one has the transparency. */
    #contenttransparency {
    background-color:yellow;
    width:609px;
    height:509px;
    opacity: .5;
    filter: alpha(opacity=50);
    z-index:100;}

    #content {
    text-align:left;
    position:relative;
    width:589px;
    height:509px;
    padding:10px;
    opacity: .9;
    filter: alpha(opacity=100);
    z-index:500;}

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    You need to define the transparency attribute that each browser uses (I.E., FF and safari all use a different tag) see here for the methods and some examples.

    <edit>
    here is another link with more info for you
    </edit>
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks

    Thanks for input

  4. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Welcome. Good Luck with that.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  5. #5
    Join Date
    Jan 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the tip, Blizzard. I faced that problem before too.

Bookmarks

Posting Permissions

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