DIV opacity background color problem

  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

Hi, I trying to design my new site, and am having some issue with opacity being inherited to all objects within my div. The goal is to have a semi transparent background color, but everything on top (h1 and p tags) to be fully opaque. The problem seems to be happening through inheritance of all objects within the DIV, even if I add a style specifically to those objects, such as having 100% opacity it will still render in Firefox as being at the 50% opacity that the background color is, as well as any pictures I may add!!!!! Here's the css code in question - I am not even going to get into the gayness of trying to align margins on floated elements--I hate designing the site!!!

Code: [ Select ]
#subNavigation {
    background-image: url(../Images/Site%20Logos/Galaxy%20Rotation%20Blur.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 370px;
    background-attachment: fixed;
    position: relative;
#subNavigation p {
    filter: alpha(opacity=100);
#subnavigationLeft {
    float: left;
    height: 345px;
    width: 325px;
    background-color: #191919;
    border: 2px solid #333333;
    filter: alpha(opacity=50);
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
#subnavigationRight {
    height: 345px;
    background-color: #191919;
    border: 2px solid #333333;
    filter: alpha(opacity=50);
    padding: 0px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-left: 345px;
  1. #subNavigation {
  2.     background-image: url(../Images/Site%20Logos/Galaxy%20Rotation%20Blur.jpg);
  3.     background-repeat: no-repeat;
  4.     background-position: center center;
  5.     height: 370px;
  6.     background-attachment: fixed;
  7.     position: relative;
  8. }
  9. #subNavigation p {
  10.     filter: alpha(opacity=100);
  11.     -moz-opacity:1.0;
  12.     opacity:1.0;
  13. }
  14. #subnavigationLeft {
  15.     float: left;
  16.     height: 345px;
  17.     width: 325px;
  18.     background-color: #191919;
  19.     border: 2px solid #333333;
  20.     filter: alpha(opacity=50);
  21.     -moz-opacity:.50;
  22.     opacity:.50;
  23.     padding: 0px;
  24.     margin-top: 0px;
  25.     margin-right: 0px;
  26.     margin-bottom: 0px;
  27.     margin-left: 10px;
  28. }
  29. #subnavigationRight {
  30.     height: 345px;
  31.     background-color: #191919;
  32.     border: 2px solid #333333;
  33.     filter: alpha(opacity=50);
  34.     -moz-opacity:.50;
  35.     opacity:.50;
  36.     padding: 0px;
  37.     margin-top: 10px;
  38.     margin-right: 10px;
  39.     margin-bottom: 0px;
  40.     margin-left: 345px;
  41. }

Thanks ahead for any help! :D
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6228
  • Loc: South-Africa

Post 3+ Months Ago

here's what I think it could be ... just try doing something like the following:
instead of this:
Code: [ Select ]
#subNavigation p{

try something like this
Code: [ Select ]
body #Navigation #subNavigation p{

almost like an absolute path.
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

Sorry I didn't respond sooner. I actually thought for a moment you were on to something, and it seemed so clear. Then I tried it...heheheh.

For some odd reason it still seems to be inheriting the parent DIVs opacity setting even with it further down the cascade?! I am not sure why in Firefox for the Mac that the filter:alpha(opacity=x) tag isn't working. I have been having to use the proprietary:

Code: [ Select ]
# -moz-opacity:1.0;
#     opacity:1.0;
  1. # -moz-opacity:1.0;
  2. #     opacity:1.0;

It then renders correctly, but then again it is messing with the images and the font contained within the element/DIV as well. Very confusing and frustrating. :)

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 14 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.