#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    103
    Rep Power
    14

    CSS Opacity for Table BG driving me nuts


    If it works in Netscape, it will not work in IE
    If it works in IE, it will not work in Netscape.

    Soo, what am I to do?

    Okay, Im trying to make a table bg have an opacity of 40%. I've gone over the net to figure out the problems, knowing that filter:alpha{} is not recognized by Netscape.

    So, I found some information to help overcome Netscape woes, and now the opacity isn't work in IE.

    I need help before I rip all my hair out. So below is what Im working with.

    Code:
    <html>
    <head>
    <style type="text/css">
    #menu {
        background-color: #FFFFFF;
    	filter: alpha(opacity=40);
    	filter: progid;:DXImageTransform.Microsoft.Alpha(opacity=40);
    	-moz-opacity: 0.40;
    	position:relative; top:0;
    }
    .tdbg {
    	background-color: #FFFFFF;
    	filter: Alpha(Opacity=40);
    }
    </style>
    </head>
    <body>
    <table width="610" border="0" cellpadding="5" cellspacing="0" bgcolor="#FF0000">
      <tr> 
        <td align="center"> <table width="600" border="0" cellspacing="0" cellpadding="0">
            <tr> 
              <td class="tdbg">FOO</td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
            </tr>
            <tr> 
              <td><div id="menu">FOO</div></td>
            </tr>
          </table></td>
      </tr>
    </table>
    </body>
    </html>

    So, basically the top cell is "correct" in IE, but the bottom cel is not.
    And opposite for Netscape (7.0+)

    How can i fix it so its the same for both browsers?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    103
    Rep Power
    14
    Okay figured out the cross browser problem:

    Code:
    #submenu {
    	background-color: #FFFFFF;
    	height: 150px;
    	width: 301px;
    	/* Mozilla ignores the following */
    	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    	-moz-opacity: 0.40;
    }
    is my new css

    Implemented this way:

    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr> 
                  <td><div id="submenu">foo foo foo </div></td>
                </tr>
                <tr> 
                  <td>&nbsp;</td>
                </tr>
                <tr> 
                  <td>&nbsp;</td>
                </tr>
              </table>
    Now the new problme is that the words foo foo foo also appear as 40% opacity within the table cell. How can I change it or have it so that the text (or other elements) are not affected by the CSS?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    173
    Rep Power
    12
    try placing foo into a container, P, perhaps.
    If they still inherit opacity try setting 100% opacity for all paragraphs...
    both in IE and mozilla.

    btw, impressive coding.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    103
    Rep Power
    14
    Will try that suggestion. Thanks

    And thanks on the coding. took about 2 hours of fedangling to get it just to work right in both browsers. Now, another few just to get the text working right
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    103
    Rep Power
    14
    Okay tried redefining the p element in CSS and im still getting opacity on the text.......
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    103
    Rep Power
    14
    ????
  12. #7
  13. Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Location
    Sebring, OH
    Posts
    1
    Rep Power
    0

    Lightbulb The css equivalent of duct tape and safety pins...


    I think I've got a solution to your problem, using the code you already supplied...
    Code:
    #bar
     {border: 1px solid #ffffff;
      height: 14px;
      width: 301px;
    }
    
    #subbar
     {background-color: #56739E;
      height: 14px;
      width: 301px;
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
      -moz-opacity: 0.40;
    }
    
    #bartext
     {color: #CB966C;
      font: bold 10px verdana;
      position: relative;
      top: -13px;
      right: -3px;
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
      -moz-opacity: 1.00;
    }
    ...within the style tag. Later in the page...

    Code:
    <div id=bar><div id=subbar></div><div id=bartext>Thursday, March 4th, 2004>> 1:21PM</div></div>
    The id "bar" puts a 100% opacity border around it, as well. Just change the negative bartext values according to the height of your subbar...seems to work fine for me, even though it's more of a McGuyver solution to the problem.

IMN logo majestic logo threadwatch logo seochat tools logo