PNG Transparency in CSS Background-image/Filter error. [Archive]

View Full Version : PNG Transparency in CSS Background-image/Filter error.

vinsza

10-13-2006, 02:58 PM

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

10-13-2006, 04:00 PM

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

10-13-2006, 04:16 PM

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

jscheuer1

10-13-2006, 04:41 PM

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

10-13-2006, 06:28 PM

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

jscheuer1

10-13-2006, 07:08 PM

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

10-13-2006, 07:24 PM

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 (http://blogs.msdn.com/ie/archive/2006/10/06/IE7-Is-Coming-This-Month_2E002E002E00_Are-you-Ready_3F00_.aspx)

jscheuer1

10-13-2006, 07:29 PM

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

10-16-2006, 12:48 PM

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.


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

10-16-2006, 04:34 PM

How we sorted this issue out this is to add the following.


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.

Twey

10-16-2006, 05:54 PM

jscheuer1

10-16-2006, 06:59 PM

It will also present a problem for any other browsers viewing the page, since the "else" bit is technically hidden in a comment block. You probably want something like this:

<link href="x_otherstyle.css" rel="stylesheet" type="text/css">


Whoa, whoa, whoa. That's incorrect conditional syntax - only the second stylesheet has a chance to be used by any browser. Sadly, this is about your safest bet:

<link href="x_otherstyle.css" rel="stylesheet" type="text/css">

<![endif]-->

with the proviso that anything in x_otherstyle.css that is bad for IE 5.5 through IE 6 be controverted in x_whatwedo_2.css

Twey

10-16-2006, 07:22 PM

Looking at the IE CC page, I see you are right about the [else]. However, this should still be writeable as:



<link href="x_otherstyle.css" rel="stylesheet" type="text/css">
The extra comment delimiters are not part of the conditional syntax, and should be treated normally by IE's parser.

jscheuer1

10-16-2006, 07:29 PM

Oh heck, none of these works as expected in all three of the following browsers:

Opera:

One:

Two:
ho again all others 2nd example

Three:
ho yet again all others 3rd example

FF:

One:
ho all others 1st example

Two:
--> ho again all others 2nd example

Three:
ho yet again all others 3rd example
hey yet again IE 3rd example

IE 6

One:
hey IE 1st example

Two:

<br> 
Two:<br>

ho again all others 2nd example<br>

<br> 
Three:<br>
<span class="noie">ho yet again all others 3rd example</span><br>

<![endif]-->
</body>
</html>

jscheuer1

10-16-2006, 07:49 PM

This does work in the three browsers mentioned:


<span class="noie2">ho again all others 4rth example<br></span>


But, it has to be technically invalid in IE for whatever that is worth and cannot screen out earlier versions of IE and is unsuitable for the linked stylesheets example.