Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    I've got a content container div with opacity defined in three ways :

    Code:
    #box { filter:alpha(opacity=80); -moz-opacity:0.80; opacity: 0.80; }
    This gets you a translucent box in most browsers. My problem is that the children of this div will inheirit this transparency, which I don't want. Various websites have recommended using

    Code:
    #box * { position: relative; }
    to fix this problem, but on my example it doesn't change anything in Firefox and it removes all transparency effects (the container too) in IE. Does anyone know how to create opaque children with the container transparency intact?

    Edit: It turns out that "position: relative" works in IE, but Firefox does some kind of crazy multiplication of opacities. If your parent element has a 50% opacity, the children can only be between 0% and 50% opacity. Any ideas to fix this besides positioning the content on top of the div with absolute positioning?

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    I believe the only solution is absolute positioning.

    (hint: Firefox is morely to render it right)
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    Quote Originally Posted by filburt1
    (hint: Firefox is morely to render it right)
    What does this mean? morely = "more likely"?

    Also, is Firefox's behavior in accordance with the CSS3 spec? If so, that's a horrible limitation if you can't have opaque children in a transparent layer.

  5. #4
    Senior Member Jack000's Avatar
    Join Date
    Aug 2004
    Posts
    250
    Member #
    7173
    why not have an outer container that contains two elements, the translucent div and the opaque div, then have the opaque div stack on top of the translucent div?

  6. #5
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Quote Originally Posted by Fallout
    What does this mean? morely = "more likely"?
    I don't know what I was thinking when I typed that but yes, "more likely." Everything by Mozilla strictly adheres to W3C specifications unlike IE, so develop for Firefox first, IE second.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:36 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com