...

View Full Version : How to modify semi-transparent table code so that images are not affected...



Errica
01-09-2008, 02:38 PM
<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?

Arbitrator
01-09-2008, 02:53 PM
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:


table table table { opacity: 0.8; filter: alpha(opacity=80); Ö }

Errica
01-09-2008, 03:24 PM
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.

Arbitrator
01-09-2008, 03:31 PM
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.

Apostropartheid
01-09-2008, 04:58 PM
Hmm. Can't you have 100&#37; and 50% transparency with certain GIFs? I always thought you could and now you confused me, so...

Arbitrator
01-10-2008, 08:15 AM
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.

vexen
01-10-2008, 06:43 PM
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%:

table table table img {
filter: alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1;
}

edit : wtf smilies

Arbitrator
01-11-2008, 09:36 AM
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.


you can alternately use a 2x2 pixels gif image to simulate the effectHow would you do this? A two‐pixel diagonal of solid color and a two‐pixel diagonal of transparency?


[Ö] 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.).


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%:

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum