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 filter:progid:DXImageTransform.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:
filter:progid:DXImageTransform.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?

[Twey]

It means that the only reason it works at all is because of the semi-transparent PNG in the background. However, IE/Win32 doesn't support alpha transparency, which is what the PNG format uses, so displays it opaque.

[jscheuer1]

That's what I meant, Twey. I also meant though that perhaps, the IE filter would work to the same end if the <!-- and --> were removed from the css file and if it (the IE filter) will do that at all and is otherwise implemented properly.

[jscheuer1]

Ok, I removed the erroneous comment tags, downloaded the image (75_tan.png) and had luck with it in both IE and Mozilla. Mozilla was working before, of course. What it needs, in order to work in IE, is a specified width for the element. This is true of many of the IE specific filters. I used an onpage style sheet and inline style:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Semi-Transparent Background Image - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.trans_box2 {
padding:8px 8px 8px 8px;
margin:1px;
border:solid 1px #555;
width:100%;
/* Mozilla doesn't support crazy MS image filters, so it will ignore the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='75_tan.png', sizingMethod='scale');"
}

/* IE ignores css styles with [attributes], so it will skip the following. */
.trans_box2[class] {
background-image:url(75_tan.png);
}
</style>
</head>
<body style="background:url('1st.jpg')">
<div class="trans_box2"></div>
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='75_tan.png', sizingMethod='scale');width:100px;height:100px;border:1px solid black;background:url('75_tan.png')!important;background:;">Hi There!</div>
</body>
</html>

The formatting of text into the first division is odd due to the padding and margin values originally meant for a table. The real key is to specify a width in the style for it to work with IE.

[pjrey]

thanks for your help. but this is the silliest thing ever.. look at all we had to go through to get STUPID semi-trans backrounds... pathetic!

thanks again everyone for your help and ideas!
ill wait until this becomes a little more simple...
i dont need lines and lines of code for something so simple..

pj

[jscheuer1]

Is:


<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='75_tan.png', sizingMethod='scale');width:100px;height:100px;border:1px solid black;background:url('75_tan.png')!important;background:;">Hi There!</div>

really that much code? It is all that is required for a single cross browser instance of the semi-transparent background.

[pjrey]

yes.. and that is just for poopy IE. you need to specify the hight and width? dumb... semi-transparency has got to be easy? do you disagree? it just seems silly....

pj

(EDIT: still dosent work! and... besides that, i cannot specify for each box, the width and height... if you look at asia.pjrey.com you see what im talking about... )

[jscheuer1]

Width is the only dimension you need to specify. The content can determine the height. Width can be a percentage. If the table or box is enclosed in another fixed width element, a percentage width for the table or box actually becomes another way of setting its left and/or right margin(s), spacing or padding relative to the container around it. I know this may be a bit much for you to deal with and, by all means, give up if you like. I am very excited by it. I've already applied it to one site I master where I'd had a less satisfactory solution before. In this case the table cell I use it in already had defined width though. If you are interested the site is State Street Blues (http://www.statestreetblues.com/). Click on the '2004 Pictures!' link near the lower left of the page. The technique is used on the box that drops down when that link is activated. The site is somewhat outdated but, will be updated soon (we are currently between festivals). The next update will come when I get and process the images from the photographer for 2005 and anytime the chair people give me new info to put up.

[pjrey]

with IE, your site does not work! it shows up with NO transapanrency, none at all. with firefox it looks great. ya, i do want to give up, i have better thngs than troubleshooting over and over... i do like to get to the bottom of things.. i just think, and i think most would agree, that this is much more difficult than it needs to be. look, how long has this thread been going for? and still no go with IE.. i like to create, not spend all my time troubleshooting, i dont know about you guys...

thanks for the help
pj

[jscheuer1]

Works fine in IE here, what version of IE are you using? What OS?

[pjrey]

strange indeed... im using IE 6.0.2900
and OS, winXP pro

ya, when i used IE, it was not transparent at all, just white.. with FF it looked great. wonder whats up!?

pj

EDIT, the reason i say lots of code, is because you state that the codes has to be entered each time (for my postings... ) versus just having the code once, and being called from my external .js file... now, instead, it has to be posted each time to my index page. just seems kinda messy.... why cant it be external?

[jscheuer1]

I just added language to check for older IE browsers and give them the off white background if they don't support this filter but, that should have no effect for you. You may have a setting switched on or off in your IE that is preventing it from working. The effect is documented for IE5.5 and up. As for external files, this filter can be applied to an element using either external javascript or external css and - GOOD NEWS - I've discovered that only one of the following css properties must be used along with the filter:

1 ) width:
2 ) height:
3 ) position: (must be absolute or relative)

That last one, position:relative, can be used in very many situations without making any apparent change to the layout.

[pjrey]

it was working with width.. but i changed it to position:relative and now, NO GO...

another thing: does anyone else have SUPER lag when it comes to using IE? trying to view trans backrounds?

when i goto asia.pjrey.com with IE, on my machine, and my dads.. it takes WAYYYY longer to load, it sites there.... blank.... for 20-30 seconds...

with FF its normal...

pj

[pjrey]

john, ya there?
lyou said that i could either use width or position?
the width worked.. but position..
i need to use position

thanks
p

[jscheuer1]

Well, that's what the specification says. If you use position, it has to be either:

position:relative

or

position:absolute

Works here.

[pjrey]

here, i have


.trans_box2 {
padding:8px 8px 8px 8px;
margin:1px;
border:solid 1px #555;
position:relative;top:-1px;left:-1px;right:-1px;bottom:-1px;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://pjrey.com/images/75_tan.png', sizingMethod='scale');background:url('http://pjrey.com/images/75_tan.png')!important;background:;
}


and no go
thanks
pj

[jscheuer1]

Use code tags (the # symbol in the editor) not quotes to enter code. And/or disable smilies (checkbox option below editor).

Anyways, it seems that I got the spec wrong (I think some filters work with relative positioning, this one requires absolute if position is the method used to make the filter work) but there is another way to work it (using no width, height or position):


.trans_box2 {
padding:8px 8px 8px 8px;
margin:1px;
border:solid 1px #555;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://pjrey.com/images/75_tan.png', sizingMethod='scale');background:url('http://pjrey.com/images/75_tan.png')!important;background:;
}

You have to set the element contenteditable though:


<div contenteditable class="trans_box2"></div>

I have no idea what, if any effect this has on its appearance in the layout, experiment and/or look it up (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/contenteditable.asp).

[pjrey]

great john! works just great.. thanks!
(why is my IE acting funny though?) i tested this on my dads laptop.. and my families home computer.. looked great in both IE and FF. but on MY IE, it looks all streched and funny..everything looks zoomed in a bit...
the only thing i can think of is that my laptop (dell inspiron 9200) is widescreen.
i have reset all settings in IE back to default.. i have the newest version also...

thanks for the code though john

pj

[jscheuer1]

Just some notes on this effect in IE:

If contentedtable is used with a division or span, the content is literally editable, similar to a textarea but a little different. Apparently, used with a table, it just allows certain filters to work. I've only observed this with IE6, in future versions (and some past ones to v5.5), this behavior in tables may change, as it is undocumented. In IE prior to v5.5 all bets are off, many filters, including this one, do not work at all. I've set a script on the page I use this with to determine if the effect is unsupported in a given version of IE and, if so, supply a solid background:


<script type="text/javascript">
if(document.all&&document.all.semiTrans.filters&&typeof document.all.semiTrans.filters[0]!=='object'){
document.all.semiTrans.style.background="url('images/semi_trans.png')"
}
</script>

In the above conditional (if) statement, document.all selects IE and some other browsers, document.all.semiTrans.filters selects IE versions that support at least some filters and the final condition selects those that do not support the class of filter used here (semiTrans is the id of the element). This will still cause problems in very early IE versions (below 5.0) but, I don't mind that, those folks must be used to a lot of things not working by now.

[achtungbaby]

This works pretty well too:



<PUBLIC:COMPONENT lightWeight="true">
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="filterImage()" />
<script language="JScript">
var orignalImage = element.src;
var spacerImage = "../images/c.gif";
var htcCapable = /MSIE ((5\.5)|[6])/.test(navigator.userAgent) && navigator.platform == "Win32";
function filterImage() {
if(htcCapable && /\.png$/.test(orignalImage)) {
element.src = spacerImage;
//escape source, but NOT the protocol
if (orignalImage.substring(0,7) == 'http://'){
orignalImage = 'http://'+escape(orignalImage.substring(7, orignalImage.length));
} else if (orignalImage.substring(0,8) == 'https://') {
orignalImage = 'http://'+escape(orignalImage.substring(8, orignalImage.length));
} else {
orignalImage = escape(orignalImage);
}
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + orignalImage + "',sizingMethod='image')";
}
}
</script>
</PUBLIC:COMPONENT>


You'd just have a conditional statement for IE to use this anytime it encounters <img src=".png">

The only drawback is that it can't be used for png's displayed as backgrounds. So you'd have to overlay your png as a normal image.

[Twey]

So you'd have to overlay your png as a normal image.This is currently the only thing making it work in other browsers. Relying on HTC is not a good idea.