Hi everybody!

I'm having slight trouble with a website I'm designing for a customer. The design itself sucks, but it's exactly the way my customer wants it.

The url is: http://www.muskelterapi.net

My problem is...
I have the backgroundpictures in every cell set to 40% transparency using the good old CSS filter-function. The whole TD-code looks like this:

<td height="63" valign="top" style="background-image:url(header_r4_c1.gif); background-position:center top; background-repeat:no-repeat; filter:alpha(opacity=50);-moz-opacity:50;opacity:50;">

Okay, the code looks good, and the transparency works like a dream, but in this case, it works too good, because all the objects IN the cell gets transparent too. To see it live, check out the URL above.
What can I do to have the background transparent, but keep the items "on top" in normal transparency?


In advance thanks!
What a nice forum by the way Just what I needed!

hmm what are the items on top? images, text?

Id sort out your CSS stylesheet if I were you. There's a lot of "heirachy" in CSS so styles will be carried on unless redefined by the next element.

Set up everything in a separate stylesheet, table, td, p, img etc etc and you'll be able to specify the background settings for everything separetly which should iron out the problems of things like the background going onto another element. Hope that makes sense!

Doesn't the filter affect the whole td and not just the background image?

Originally Posted by gringo

Doesn't the filter affect the whole td and not just the background image?

Unfortunatly, that's what I think too, but I'll try DaveR's solution first, to see if that helps.
Thanks guys!

Don't forget the CSS Filters are an IE Only thing - in firefox, oprea, etc. the TDs render with solid white backgrounds.

Yeah, that's right, but I can use "-moz-opacity" to fix the Firefox problem... I think...

Well, hi again...

I did what Dave asked me to, which cleaned up the code alot, but unfortunatly it didn't help me too much. Thanks anyways though

I'm pretty sure Gringo has a good point here, the filter affects the whole TD (including its content), and not just the bg-picture.

Does anyone have another solution to this problem? I need the background picture in the cell to be transparent, but not the items...
Is there a JavaScript I could use to solve my problem? What if I use PNG?

Thanks to those of you that have helped out already. I appreciate it!

Well.... if you want to tie yourself in knots, why don't you override the style on the td by putting a style on the text to make the text fully opaque?

But this is getting very messy!

Post deleted.....

Well, I'll rather deal with the mess, than with this problem

I've done what you said, but it just won't do. Sorry!
I've uploaded the latest code and CSS so if anybody wants to see, go ahead...

http://www.muskelterapi.net/index.htm
http://www.muskelterapi.net/screen.css

Aren't we making this a bit more difficult than it need to be?

What if you make your background image a transparent gif - set the opacity to what your design requires and then lay your text over the image....

Would that work??

JohnJ

Well, GIF would work if it was 100% transparency, but it's 50%, and in GIF it's either everything or nothing. So, GIF and PNG didn't work either, and I'm completly out of suggestions... Using the filter:alpha-style in the TD-tag affects everything in the cell, so I can't use that, unless I'm using it the wrong way.

I'm desperat to make it work!! Heeelp please!!

Try this:
http://youngpup.net/2001/sleight

It's a script that lets you use alpha transparent PNGs in IE6, without affecting it in other browsers.

Minaki, if I haven't said it before, I'm saying now; YOU'RE A GENIOUS!
Thanks alot, that worked atleast for IE6. The rest of the browsers will be something I would have to work on...

It should just work on other browsers. The latest versions of Firefox & Oprea support alpha transparent PNGs...

Alright. Then thats not a problem either!
Thanks man!