PNG Transparency in CSS Background-image/Filter error.

[vinsza]

Please help...

code below.
#menubarB{
margin-top: -15px;
margin-left: 55px;
float: left;
width:465px;
height:66px;
background: transparent url(assets/template_images/what-we-do_home.png) no-repeat;
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='assets/template_images/what-we-do_home.png', sizingMethod='scale');
}

Firefox doesn't understand filter and in ie6 background is shown before the filter and ie needs the filer for the transparency...

is there no way to do browser detection in csss?

THanks guys.

[jscheuer1]

This is a bit tricky. For one thing, if you are using an external stylesheet, the path to the filter's image may have to be either absolute or relative to the page that is using it, rather than relative to the stylesheet. This is because MS filters are in reality javascript, not pure style. If the stylesheet is on the page or the stylesheet and the page both occupy the same relative position on your site, this is not a consideration.

Now, the real trick is to get IE to do it one way and all others to do it another way, here is one method for that:

#menubarB{
	margin-top: -15px;
	margin-left: 55px;
	float: left;
	width:465px;
	height:66px;
}

body>#menubarB{
	background: transparent url(assets/template_images/what-we-do_home.png) no-repeat;
}

* html #menubarB {
	background-color: transparent;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/template_images/what-we-do_home.png', sizingMethod='scale');
}

Notice the red body in the second selector. This must actually be the #menubarB's immediate parent element.

This method may have problems in IE 7 (if it supports the > selector). IE version specific conditional comments can be used if this is the case but, this means that the the IE part of the style must be in a separate stylesheet on the page itself, inside of a version specific conditional comment block.

It will have problems in earlier version of IE, those before 5.5 which do not support this filter. If that is a consideration, it can also be solved with version specific conditionals.

[Twey]

Doesn't matter: IE7 supports alpha PNGs. At last.

[jscheuer1]

Doesn't matter: IE7 supports alpha PNGs. At last.

It does matter, if that is true and IE 7 supports the > selector, there will be two 'backgrounds' and these may not overlap exactly or look well together for some other reason.

[Twey]

Ah... I think filters take precedence. Could be wrong, though.

[jscheuer1]

That was the original problem in IE 6, both were displaying but, either the background took precedence in the stacking order and since it was 100% opaque, obscured the filter and/or the filter's path was invalid. With luck the two would superimpose in IE 7 but, they might add their alpha channels, making it more opaque. If they didn't superimpose, it would be a double image sort of thing.

It could be like you say but, until one of us gets IE 7, we won't know for sure. I for one am resisting that until it becomes official. It would be hoped that if IE 7 supports the > selector, it would stop supporting the * html hack but, I doubt that will happen. Conditional comments would resolve any problems that might arise.

I originally said this might be a problem in IE 7. It would be a problem in early (pre 5.5) versions of IE.

In any case, my solution (earlier in this thread) should work fine for current modern browsers.

[blm126]

IE 7 does not support the * html hack, and it will support PNG transparency. If you don't have IE7 I would get it as it is scheduled for release this month

[jscheuer1]

IE 7 does not support the * html hack, and it will support PNG transparency.

If that is so, and it supports the > selector. All would be well except for pre 5.5 versions of IE.

[vinsza]

Hey guys, thanks for the help.
Just to answer a couple things there, the background takes presidence over the filter and on IE browser support the dam thing.

How we sorted this issue out this is to add the following.
<!--[if IE]>
<link href="x_whatwedo_2.css" rel="stylesheet" type="text/css" />
<!--[else]>
<link href="x_otherstyle.css" rel="stylesheet" type="text/css">
<![endif]-->

I'll propose a new problem though, when using the ie style sheet in one of the divs that contain a form, the filter somehow overlays the form field and you cannot edit it. Any suggestions?

[jscheuer1]

How we sorted this issue out this is to add the following.
<!--[if IE]>
<link href="x_whatwedo_2.css" rel="stylesheet" type="text/css" />
<!--[else]>
<link href="x_otherstyle.css" rel="stylesheet" type="text/css">
<![endif]-->

I'll propose a new problem though, when using the ie style sheet in one of the divs that contain a form, the filter somehow overlays the form field and you cannot edit it. Any suggestions?

I had mentioned conditionals as a way to deal with this. However, the way you have yours set up there may well present a problem for IE 7.

About your other problem, I would only speculate that giving the form field element a background color might do the trick and/or giving it a higher z-index than the element with the filter. For z-index to have an effect, both elements may have to be either of position:relative or position:absolute. These are the common ways that these type of stacking problems can be dealt with. There may be an optional parameter for the filter that could be set to obviate this problem. There could be another approach. It may be a bug with no workaround.