IE png transparency hack

[ghostme]

Hello good pple of the forum,
I've searched the forum and found some solution that should work for this problem. Basically, i have some couples of transparent background pngs on my site which needs to be displayed correctly in IE 6.
css code:

#wrapper div#leftcontent div#verticalnavbar {
    width:215px;
    font-size:14px;
    float:left;
    margin-bottom:1px;
    margin-top:1px;
    height: 204px;
    background-image: url(images/menubg1.png);
    padding: 0px;
    margin-top:4px;
    font-family: "Trebuchet MS", Tahoma, sans-serif;
    line-height: 1.5em;
    text-align: center;
    background-repeat: no-repeat;
    margin-left:2px;
    
} 

filter hack:

* html #wrapper div#leftcontent div#verticalnavbar{
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png", sizingMethod='scale');

} 

Please what am i doing wrong? Help me

[Dan Schulz]

If those are separate IDs being applied to separate elements (which I'm sure they are), then you'll have to separate the selectors with commas. Then do the same with the Star HTML hack. The hack for example, would look like this:

* html #wrapper, * html div#leftcontent, * html div#verticalnavbar{ 
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png", sizingMethod='scale'); 

}

If the three IDs are being applied to the same element, then you won't need all those ID selectors, and can just reference the one at the "bottom of the food chain" (the last one) since it'll be the element that has the filter applied to it.

Of course, I'm just grasping at straws here since I can't even see the HTML code you're using.

[logic_earth]

* html #wrapper div#leftcontent div#verticalnavbar {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png", sizingMethod='scale'); 

}

You need to also remove the background image from the previous rule.

[Paul O'B]

Of course, I'm just grasping at straws here since I can't even see the HTML code you're using.

That looks correct to me Dan

I would add that you will also need to cancel out the original background image or it will overwrite the filter image.

e.g.

* html #wrapper, * html div#leftcontent, * html div#verticalnavbar{ 
 background:none;       filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png", sizingMethod='scale'); 

}

An example:

http://www.pmob.co.uk/temp/transparent-test3.htm

[ghostme]

Thanks everybody from dan,logic_earth and paul, it worked.
Thanks once again Cheers

[Dan Schulz]

Cool. Glad to hear (ok, read) it.

[mrtopher]

I've got a png background issue in IE as well but I tried the solution posted here and all it does is make the background dissapear in IE6.

Am I missing something?

http://ns3.practisinc.com/~concordemed.com/content.html

[Paul O'B]

The element needs "haslayout"

    * html #content {height:1%; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://ns3.practisinc.com/~concordemed.com/images/bg_content.png',sizingMethod='scale'); }

[mrtopher]

Thats what I first thought too... but it still doesn't work. I reuploaded the updated css with the height:1%; and it still doesn't show the background in IE6.

[Paul O'B]

I have it working locally ok with the original code I gave.

Use an asbolute reference to the image or change the path as I believe the image path is relative to the page that displays it and not the css file as per usual.

[mrtopher]

Referencing the image absolutely did the trick!!

Thanks.

[mrtopher]

I just realized that I have a larger problem now than the background. Things are "looking" good but I can't click any links or select anything that has that background in IE6. Any idea why this is?

[Paul O'B]

Any idea why this is?

Yes

It's a known problem with the filter and why I avoid using it unless absolutely necessary.

Try this fix (which isn't 100% guaranteed to work):

    #content a{position:relative}

You may need to make the css specific if it gets in the way of other styling.

[Dan Schulz]

Try setting position: relative; and then apply a z-index to see if it works (just as a test at first). Sounds like you may have a depth sorting error, but I can't tell without the code.

[Paul O'B]

Sounds like you may have a depth sorting error,

No, its a known problem with the filter and can take various forms and various fixes.

http://www.satzansatz.de/cssd/tmp/al...nsparency.html

http://www.daltonlp.com/view/217

The fix I gave should work in this case though

[Dan Schulz]

I forgot about the filter, actually. (Just woke up around the time that was posted.)

[mrtopher]

That did the trick... thanks again!