Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS Transparency limitation

Options
  • 11-08-2004 5:32pm
    #1
    dangerman
    Registered Users Posts: 1,169 ✭✭✭


    Howdy I'm using

    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;

    in a stylesheet to make a table a bit transparent so a background fades through a little bit for a very nice effect. This is cool, but text & images inside the table inherit the style from it and are transparent too. Is this a limitation (which I think I remember reading) or am I just missing the obvious?

    example:

    screeny1.jpg


Comments

  • Options
    #2
    Zaltais
    Closed Accounts Posts: 304 ✭✭Zaltais


    You should be able to override this by using a universal selector to feed a different opacity to children of the given element.

    So if this is your CSS:
    <style type="text/css">
#myID {
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}
</style>

    Then you can revert the opacity of it's children by using this:
    <style type="text/css">
#myID {
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}
#myID *{
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;
}
</style>

    I've not actually tested this, but it should work.


  • Options
    #3
    dangerman
    Registered Users Posts: 1,169 ✭✭✭dangerman


    Thanks for your help.

    I think I'm following your instructions ok:
    
<html>
<head>
<title>Untitled Document</title>

<style type="text/css">
<!--
.unnamed1 {
	border: 1px solid #000000;
	filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}

.unnamed1 *{
	border: 1px solid #000000;
	filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;
}

-->
</style>

</head>

<body background="tcareturn.jpg">
<table width="500" border="0" cellpadding="0" cellspacing="1" bgcolor="#996600" class="unnamed1">

  <tr>

    <td>

    <br><br><br><br>
      <img src="pic.jpg" width="120" height="97"> <font size="+6"><strong>TEXT</strong></font>

    <br><br><br><br><br><br>

    </td>
  </tr>
</table>
</body>
</html>

    ...This produces different garbled effects in ie/firefox, but it doesn't seem to be a solution?

    edit: according to this site
    Very quickly you should see the problem. The transparent property that we wanted to apply to the menu is carried onto every child....Unfortunately there is no real good solution for this problem. Which might be a limitation and should definitely be a design consideration.

    Really annoying.


  • Options
    #4
    Zaltais
    Closed Accounts Posts: 304 ✭✭Zaltais


    Hmmm, that's not good.

    Ok, so opacity does funny things with the CSS inheritance rules.

    There are numerous ways around this with absolute positioning / floats etc.

    However, it looks like the method you're using won't work unfortunately.

    Let me know if you want specific examples of achieving the same with significantly different HTML. This may not be ideal approach if you're restricted to using tables though.


  • Options
    #5
    dangerman
    Registered Users Posts: 1,169 ✭✭✭dangerman


    Yep its not good.

    Unfortunately its a wordpress (www.wordpress.org) installation i'm customising so I don't want to go customising it too much...just used transparency on a whim; it really added to the site, not to worry, I'll come up with a different look for it.

    Thanks for your help.


Advertisement