semi-transparent... possible?

[pjrey]

i searched... didnt find what i was looking for...
i was wondering howto do semi-transparent tables... i have a backround image in the index.html page, and the talbe has a backround color, i want the backround IMAGE to slighty show thourhg... like 50/50%...
its not that easy is it...
it should be!!

http://asia.pjrey.com (for example... look at the CITY, and DATE POSTED.. i want the backround to show through)
p

[jscheuer1]

I agree but the fact is that it is not easy. Using a combination of opacity:0.50, -moz-opacity:0.50 and filter:alpha(opacity=50) in the style for the element can work (5 might be better as 6 or 7), ex:

<table style="opacity:0.50;-moz-opacity:0.50;filter:alpha(opacity=50);">

If your text is bold and dark (doesn't work too well with images in the table) or you can use a the same technique and have another, nearly identical, table that has your content in it, a background that is transparent and that is absolutely positioned over the table with the semi transparent background.

[pjrey]

thanks...
i tried it out and was not good... as you said, the text and table lines were 50/50 transparent as well. no good.

how would i go about doing the double tables? i tried, but didnt work. this will be for a guestbook type setup (see link)
http://asia.pjrey.com


so how would you go about placing another table directly ontop?

thank you
pj

(side note: would it be possible to just add that code you gave me into each TD... for example:
<TD style="opacity:0.50;-moz-opacity:0.50;filter:alpha(opacity=50);" WIDTH=125> <SPAN class="guestbook1">date posted:</SPAN></TD>

would that work?)

[pjrey]

had to go elsewhere.. this forum kinda creeeeps... i used filterrogidXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/50p_white.png

all is OK
checker out.. http://asia.pjrey.com

pj

[Twey]

Wrong. All is not OK. That effect only applies to Internet Explorer users. If it's important to have the transparency, don't use filter:.

[pjrey]

i think you got it backwards... it does NOT work for IE users.. but DOES work for NN and FIREFOX....
its fine for me...

(ps. im still socked there isnt an easy way to do this!!)

pj

[Twey]

Nope, I have it right. The filter: property is IE-only, and not W3C-standard. John's code ought to work in all three of those browsers. Are you sure you were applying it properly?

[pjrey]

no, i guess im not sure. i tested it in FF and NN, and it looked great in both. in IE it doesnt seem to be working... its totally transparenent.. whereas with FF and NN it is 75% for the white, and 50% for the tan..
im using the same files for both...
for IE i use:

.trans_box2[class] {
background-image:url(images/75_tan.png);

and for mozilla i use:
filterrogidXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/75_tan.png');

EDIT: sorry, you are right.. i have it backwards...
but still, why isnt it working in IE!? grrr... thansk!

[jscheuer1]

This is what he is using, on his external stylesheet (erroneous html comment tags included):

<!--
.trans_box1 {
  padding:0px 1px 0px 8px;
  margin:1px;
  border:solid 1px #555;
  /* Mozilla doesn't support crazy MS image filters, so it will ignore the following */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/50p_white.png');
}

/* IE ignores css styles with [attributes], so it will skip the following. */
.trans_box1[class] {
  background-image:url(images/50p_white.png);
}

.trans_box2 {
  padding:8px 8px 8px 8px;
  margin:1px;
  border:solid 1px #555;
  /* Mozilla doesn't support crazy MS image filters, so it will ignore the following */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/75_tan.png');
}

/* IE ignores css styles with [attributes], so it will skip the following. */
.trans_box2[class] {
  background-image:url(http://pjrey.com/images/75_tan.png);
}
-->

It is a miracle that it does anything but, the 'Mozilla and other browsers' part seems to utilize a semitransparent .png as background image for the table. The overall include/exclude methodology is different than I am used to and has definite possibilities for this and other situations.

[pjrey]

what does that mean? why isnt it working for IE?