Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts

    How to modify semi-transparent table code so that images are not affected...

    <style type="text/css">
    NOTE {SETTINGS FOR YOUR CONTENT TABLES}
    table table table {
    background-color: ;
    filter: alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8;
    background-position:top left;
    background-attachment:scroll;
    background-repeat:repeat;
    }
    </style>

    This is the code I'm using but it affects the images within the table. This is being used in Shoutlife.com so I cannot place any css code in individual images. Is there something I can place in the css code so that images are not affected?

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Errica View Post
    Is there something I can place in the css code so that images are not affected?
    No. Transparency changes are not inherited; in other words, itís not possible to override transparency changes for child elements.

    The only thing that you might do is to get more specific in targeting your CSS so that the img elements and any of their ancestor elements are not targeted for transparency changes.

    Tangential Information
    In case you didnít know, you should be using the CSS3 opacity property supported by the latest versions of Mozilla Firefox, Opera, and Safari. The -moz-opacity property is an old Mozilla‐only property thatís obsolete since Mozilla added support for the opacity property ages ago.

    Also, declaring Microsoftís filter property twice for the same elements is redundant since the second declaration will simply override the first. Just use the first, shorter declaration. And note that this property only works in Internet Explorer, of course, hence why you need the CSS3 property.

    With these changes, you get the following revised rule:

    Code:
    table table table { opacity: 0.8; filter: alpha(opacity=80); Ö }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Is it possible to simply use a semi-transparent .png image that can be added to all table tags? If so, I'd like it to work in firefox and ie.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Errica View Post
    Is it possible to simply use a semi-transparent .png image that can be added to all table tags?
    If a background image and no semi‐transparency in MSIE6 work for you, then yes.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Hmm. Can't you have 100&#37; and 50% transparency with certain GIFs? I always thought you could and now you confused me, so...

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by CyanLight View Post
    Hmm. Can't you have 100% and 50% transparency with certain GIFs? I always thought you could and now you confused me, so...
    Insofar as I know, no. Standard GIF images are limited to on‐off transparency.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    you can alternately use a 2x2 pixels gif image to simulate the effect, or the hard way to support PNG's transparency in IE: http://www.alistapart.com/stories/pngopacity/

    i am not sure about this either - targeting the images and giving them 100&#37; opacity, i don't know if they would be 100% of 80% (=80%) or simply 100%:
    Code:
    table table table img {
    filter: alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1;
    }
    edit : wtf smilies

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Arbitrator View Post
    If a background image and no semi‐transparency in MSIE6 work for you, then yes.
    I also forgot that Internet Explorer doesnít handle gamma correctly for PNG images, so thereís another problem. You might note how my avatar exhibits this problem when viewing my posts in Internet Explorer; the color doesnít blend into the background correctly.

    Quote Originally Posted by vexen View Post
    you can alternately use a 2x2 pixels gif image to simulate the effect
    How would you do this? A two‐pixel diagonal of solid color and a two‐pixel diagonal of transparency?

    Quote Originally Posted by vexen View Post
    [Ö] or the hard way to support PNG's transparency in IE: http://www.alistapart.com/stories/pngopacity/
    I just read this article (except for most of the Browser Detect Lite code). I must say that itís considerably dated (circa 2002) and uses some ugly, erroneous, and inaccessible code.

    Examples of Problems with the Article or Techniques Therein
    • Internet Explorer properly supports PNG alpha transparency now via Windows Internet Explorer 7.
    • Conditional comments targeted at Microsoft Internet Explorer 6 would be a better way to do what they propose: (A) require that every browser support ECMAScript/JavaScript (or receive a GIF) and (B) use browser and platform detection methods that can be fooled by the browser faking its identity.
    • MSIE wonít have fallback content (i.e., images wonźít have alt text).
    • The solution wonít work in XML due to use of the document.write method (which, for that matter, shouldnít be used in XHTML documents).
    • The solution requires the creation of a second (GIF) image for every PNG image.
    • The example documents are poorly written (e.g., tables for layout, presentation via HTML instead of CSS, a missing doc. type declaration, invalid URIs, etc.).

    Quote Originally Posted by vexen View Post
    i am not sure about this either - targeting the images and giving them 100% opacity, i don't know if they would be 100% of 80% (=80%) or simply 100%:
    Code:
    table table table img {
    filter: alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1;
    }
    ]
    If you apply opacity changes to an image via CSS, the opacity stacks with existing opacity levels. For example, with an 80% opaque image and 100% CSS opacity, youíd get 0.8 opacity ◊ 1 opacity = 0.8 opacity.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •