problem with semitransparency/translucency

[KEVaholic00]

Hi all,

I'm working on a "web site" for a friend and he wants to have semitransparent (translucent?) tables so that the background image on the page shows up "slightly" behind the table, thus the semitransparency.

The problem for me is that when I view the page, half the table disappears and it cuts off the content to make an empty space sort of. The border doesn't show up either, so I assume the table itself is being cut off and not just the table cell. I'll attach/link to a screen shot at the end of this post. . .

It only happens when I use the following filter in CSS on the table (something like "table table table {}"):

filter: alpha(opacity=50);

I assume it'll happen no matter what the opacity level is. . . But I assume I'm not the only one having this problem. My browser is Internet Explorer 6 and my OS is WinXP.

Might anybody have a possible solution to this?

Thanks in advance!
~Kevin

http://www.henjins.com/screenshot%20of%20IE%20problem.jpg

[mrruben5]

Oof, that's IE's peekaboo bug. Youre not happy when it happens.

The best solution to this is using a png image with alpha opacity. You can use conditional comments and the alphaimageloader to make it transparant in IE.

Or use a background image wich is faked.

[KEVaholic00]

That's what it is? ARGH. Lol. :|

I read an article about that on some web site recently. . . let me see if I can dig it up.

Ah, here it is:

http://www.positioniseverything.net/explorer/peekaboo.html

Now, according to that article/page, there are three ways to fix the bug. . . but unfortunately, this web page I'm making is a MySpace (http://www.myspace.com) profile, on which I can't change most of the layout, other than inserting new CSS to "take precedence" over the old stylesheet, and HTML of my own.

So, unless there's a way to achieve the same effect in PSP or Photoshop (which I'm sure there is but I just don't know it), is there any other way to go about this?

[mark87]

Try adding position: relative; to the table?

In myspace you can still try that with inline CSS if you like.

[harbingerOTV]

The best solution to this is using a png image with alpha opacity. You can use conditional comments and the alphaimageloader to make it transparant in IE.


This will work but seeing how it's a myspace site your morel ikely than not going to have links over the transparent layers. IE will not recognize the links. What IE does is place the filter above everything else therefore laying it over the links.



Or use a background image wich is faked.

this should be the best way to go.

Looking at your image and knowing myspace is built in tables you go go about it different ways.

Easy way is to have all your tables have the same background as the body just lighter. Like open the body background tile image in you PSP or PS and just adjust the brightnesss a little to make it match want you want to accomlish with the opacity. Make sure the body image scroll (not fixed) and the difference should be small given the background your using. You'll still see them not lining up corectly. You could add a thicker border to mask it sort of.

[KEVaholic00]

It seems that putting the following tag on the table did the trick:

table {
height: 1%;
}

[mrruben5]

Holly hack. You do need to hide it from IE5 mac though.