Problem with transparent background sizing

[terrybarnes]

I have a transparent png image that I'm using to add shadowed borders to a 500px wide centred container.

Now, as we all know IE6 and below are a little frustrating when it comes to transparent pngs.

The problem I'm having is that it all works well in all other browsers but when I'm in IE6 there's a grey space where the transparency should be. So, I used this script: [twinhelix.com...] (I also tried the official Microsoft filter in the CSS and the same occurs).

Rather than centering the 500px wide png it seems to be stretching it to either side of the page. Any ideas? Here's my CSS:

html, body
{
background-color: orange;
background-image: url(images/background.png);
background-repeat: repeat-y;
background-position: center 0;
margin-top: 0;
height: 100%;
}
img, body { behavior: url(iepngfix.htc); }

[terrybarnes]

---

System: The following 3 messages were spliced on to this thread from: http://www.webmasterworld.com/css/3803838.htm [webmasterworld.com] by swa66 - 4:20 pm on Dec. 10, 2008 (utc 0)

---

I've had a good search around the forums and there seems to be various ways of solving the dreaded IE6 and below when it comes to transparent png files.

I'm only needing to use it for the background which will repeat vertically so I'm wondering what is the best way and easiest way of solving this issue?

[rson451]

IMO, if you absolutely have to use a > 8 bit transparent png, you should wrap conditional comments around pngfix.js so that it is only done in IE6.

[swa66]

I see 3 avenues:

1. Don't use the features not supported by IE6: This is a de-facto status quo till the 30% of IE users that swears by IE6 finally do upgrade (many years to go before you can ignore their market share I'm afraid).
   
2. Fix IE6's abilities: Conditional comments and scripted solutions are the easiest path to get this done.
   
3. Give IE6 a degraded solution: If we continue to cater the very best we can to IE6 users and don't give the better browsers anything more, then why would they ever humor us and upgrade ? You could do a IE6 version that's not got the e.g. drop shadows, the rounded corners at all. It'll look different, but the core content is there. Again conditional comments is the easiest path forward. Consider telling the IE6 users with a conditional comment that they are getting a degraded view and encourage them to finally upgrade their browser.
   

I'm still mostly on the 2nd solution myself, but I'm seriously starting to consider the 3rd for some sites.

There is a 4th: Tell the IE6 users to go away, but I don't really want to consider that. It's what the Microsoft minded webmasters did to the netscape users back in the browser wars, but even then I don't want to play that game.

[swa66]

I think for the case of repeating backgrounds and transparency at the same time, the IE filters just don't support it. I'd like to be proven wrong though.

So a solution to your example would be to blend the transparency with the orange background yourself and give that -non transparent image to IE6 using a conditional comment. (and if you need a version with blue, one with green etc: make many of them ... and let them load images over and over). Or make the background simpler for IE6 and not need transparancy.

[BadBoyMcCoy]

I use transparent png files on my site, similar to what you want with the background repeating..

I used something called pngfix
It took me a while to figure but i got it working in the end. It uses a file with a .htc file suffix which I think is something that only internet explorer can use. I can't tell you exactly how I got it working now because I'm at work and my files are on my home computer.

It took me a few tries but it does definatly work in ie6. All links clickable, and i'm also pretty sure its javascript free.

I'll post later from home when I've got the files

[terrybarnes]

That would be great - thanks