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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    I have searched everywhere to find a solution to this, but to no avail. The problem is, I have a div with a certain background transparency set to it in the css:

    Code:
    .content {
        filter:alpha(opacity=30);
        -moz-opacity:0.3;
        opacity: 0.3;
        }
    Now, I want all the child elements inside of this div to NOT inherit that transparency. This can be achieved in IE using this code:

    Code:
    .content * {
        position: relative;
        }
    (I don't know why this works, so don't ask me, I read it in a tutorial, for some reason, when all child elements to the div are set to position: relative, they lose the transparency, this however does not work in mozilla browsers, i.e. firefox)

    Before anyone replies saying, "why not just add a transparency style with 100 and 1.0 opacity to the div's child elements like this:"
    Code:
    .content * {
        position: relative;
        filter:alpha(opacity=100);
        -moz-opacity:1.0;
        opacity: 1.0;
        }
    This DOES NOT work, I have already tried it.


    Thanks in advance.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    Can't a background color to be set for the child items?
    Have you tried to put "!important" after the transparency modifications in the child items? (yeah, sounds stupid, but so does the IE fix)

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Another thing you may want to try is setting the z-index higher on your child elements than on the parent. This is strictly a guess on my part, but it may rise the children above the parent and thus make them subject to their own transparency settings.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    Tried both z-index and !important, neither worked.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    The only other idea I can come up with is to explicitly define classes for what would normally be child elements. At least this way, they become parent elements as well and perhaps you can get around the issue that way.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    Thanks for the suggestions, but this too does not work. No matter how you define the elements contained within the transparent div, they are still children of that div and still retain the transparency.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  8. #7
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Did you try more than 100% opacity?

    i.e.
    Parent: 80%
    Child: 120%

    I don't know if there's another way out of this other than using positioning so it's not a child of that div anymore.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  9. #8
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Only way I've gotten this to work in the past is to create layers... a div with the "child elements" floating over the "parent div" with the transparent bg. I know it's a hack, but it works.

  10. #9
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    Transio, can you give me an example of what you mean? Are you just saying you changed the z-index values?

    Brak, I just tried what you suggested, no good.

    EDIT: Hey Brak, I just realized, In your Bob.warpspire.com website, you have transparent tds and the content inside does not inherit the transparency! I looked at your css though, and its exactly like mine, only divs instead of tds. How come it works for you and not for me? :cry:
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  11. #10
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Unfortuanly this is a problem with mozilla.. There is not really a way to get it to work the way you want it to work. (Ive heard of at least six ways that SHOULD but DONT work)

    The technique that transio is discribing is to set a pretend child element over your transperent element. The child element wont actually be a child element at all, but another element that is just layered over your transparent element using z-index. This will give the effect you are after but at the cost of more work if you have alot of elements that you want to apply this effect to.

    The silver-lining that Ive been hearing about is the transparancy property that is going into the CSS-3 specification(opacity) will work properly. Unfortuanlly its not currently supported by any browsers.



Page 1 of 2 1 2 LastLast

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
  •  

Search tags for this page

add transparency css to all elements inside div

,

css z-index higher index element should not be transparent

,

div child opacity in firefox

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:26 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com