[Solved] CSS Microsoft alpha style filter in a stylesheet?

There is - try looking here for more details.

http://thedesignspace.net/MT2archives/000103.html

that looks very promising, but my background image is for a title, where the background image is behind the text on the left (a logo). so not sure how to assign the styles

here is the code
HTML

CSS

h1 { color: #FFFFFF; font: 2.8em Arial, Helvetica, sans-serif; padding: 1em 0 1em 2em; margin-left: 1em; background: url(../images/shared/lvlogo.png) center left no-repeat; }

so according to the above article, is it as simple as

h1
{
background-image: none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/shared/lvlogo.png,
sizingMethod='scale');
}

What about the center left no-repeat part of the background style?

tried it with the conditional elements in the head and no luck, no picture in fact

here is the link
www.linuxvermont.com/index.php

I know the menu's are fubar in IE6 as well, but that's a different issue

try

gave it a whirl, no good

Ok, try this then:
In your head...




Then in the css file...
/* IE7 does not support the star-html hack anymore, so this is ignored by IE7: */
* html h1 {
background: transparent none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your-img-src.png',sizingMethod='scale');
cursor: pointer;
}

got that up, but nada

ifohdesigns, thanks for taking the time to work through this with me

at the least, i think I have achieved graceful degradation!

1) filters do apply to elements that have haslayout set to true only.
2) You don't want the penguin to be scaled.

You can make this work by making the h1 have an anchor in it, and then apply the background to the anchor, text-indent, and you should be good to go.

What ichao means is you need to trigger hasLayout for the filter to kick in. Its easy enough to do that without modifying your html. And you should use one of the other sizingMethods.

/* for IE6, 5.5 stylesheet * syntax for filter property (http://msdn2.microsoft.com/en-us/library/ms532969.aspx) * filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='path/to/image.png'); * * notes: * element must have layout for a filter to be enabled * sizingMethod values: crop, image or scale */ h1 { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your-img-src.png',sizingMethod='crop'); zoom: 1; }

zoom will trigger hasLayout with no other side effects.

Bloody Hell! You are the man Chris!!!!

It works like a charm.

Thanks guys for all the help. I would have given up on this stuff a long time ago if it wasn't for this site.