Css Ie5/6 Transparancy

[[=hris]

Hi,

 

I am trying to get a site to have transparancy with css... i can get it working fine in mozilla using -moz-opacity: .8; however when i try to use filter:alpha(opacity=80); in IE 5/6 nothing happens - no transparency

 

A sample bit of one of my div section's css is

 

>#Content 
{
filter:alpha(opacity=80);
-moz-opacity: .8;
margin:20px 50px 50px 220px;
padding:10px;
background-color:#49554E;
border:1px solid #A1A1A1;
}

 

the site is http://trident.chrisps.com

 

Any ideas anyone??

[TCH-Sales]

Well in Internet Explorer it looks like your header transparancy is working. Transparancy is a hard thing still for CSS to pick up because in its nature it picks up whatever the parent CSS code is. After doing a Google search on the matter it sounds like CSS 3 might fix some of these issues but that's still a ways away.

 

After spending many hours knee deep in HTML myself the best thing to do is to move it around several places to see if you can get it working. It is working where you called it exact in the header's HTML so there's nothing wrong with your code there at least.

 

Hope this helps!

[arvind]

Oh I have this problem as well am trying out the filter:alpha(opacity=100); bit. The transparency is fine in mozilla. People tell me IE is bad at supporting transparencies. Is that true, I think it is because like I said firefox transparency is fine

[TCH-Sales]

It does support it, it just doesn't do it well. In other words you have to keep playing with the two diffrent codes till you get it working on both ends.

[arvind]

just installed the support for IE transparency. It works but like you said Mitch not well. I'll stick to firefox ! Thanks !

[TCH-Sales]

Not a problem!

[[=hris]

Thanks for the reply - it is weird tho - a friends site who is using identical style sheets code (he is using my style sheet) has transparnecy fine, but my site does not (in the same browser)

 

When you view it, how do you know the header transparency is working?

 

If it is working, the logo and the header should be exactly the same colour. If it is not working, they should be different colours.

 

Also, the picture to the right should not be obscured by the content pane

 

Thanks

[[=hris]

well i have been having a play around, and got a friend to help, and it would appear that for it to work in ie, you have to have width:something; in there.

 

In other words i can either get it to display properly in IE or Mozilla, so i will have to have a css sheet for each browser!

[krieser]

so i will have to have a css sheet for each browser!

You should be able to use the same style sheet for both browsers, if the only difference is the transparency. My understanding is that the browser will just ignore style sheet properties it doesn't understand. So you should be able to continue to use :

#Content

{

filter:alpha(opacity=80);

-moz-opacity: .8;

margin:20px 50px 50px 220px;

padding:10px;

background-color:#49554E;

border:1px solid #A1A1A1;

}

and it should work fine. I've done this with opacity before, and never had any problems (except it not showing up in certain browsers).

[[=hris]

The problem is that it would appear for IE5/6 transparency to work, there must be a width and height declaration. While this is fine for IE5/6, mozilla forces the hight, so it does not display correctly

[btrfld]

What about using the old Box Model Hack to specify a height for IE and then cancel it for everybody else?

 

... {

height:NNNpx;

voice-family: "\"}\"";

voice-family:inherit;

height:auto;

}

 

Just a thought ...