Transparent image problems in Firefox

Browser Viewing Problems

[Tobin83]

I am having problems with how my website looks in Mozilla FireFox and Internet Explorer.

I am designing for a IE audience mostly. I have a transparent image that shows up correctly (with rounded edges on the rectangle) in FireFox but incorrectly (with sharp edges (the actual size of the image) in IE.

I was wondering if anyone knew why this happens.

[drhowarddrfine]

Hard to tell without seeing the code. IE is a very poor browser but it sounds like you coded using Firefox as your design browser. This is the right thing to do because you know your code is standards compliant.

Something to check. Do you have a proper doctype on your page? Otherwise IE goes into quirks mode and you never know what it will do.

Validate your code for errors.

[tedster]

Here's another thing to check with transparency troubles -- IE does not support png alpha channel transparency (percentage transparency) properly. So if it's a png image, stick with with 100% transparent pixels (that is 8-bit, not 24-bit).

If it's a gif image, well, then we probably need to look at the css. Especially if it's a linked image.

[inveni0]

Yeah, sounds like you're using a .png file. IE won't support this. Convert it to GIF, or stick it in a flash file if it has special gradient transparencies that look crumby in GIF format.

[DrDoc]

... or use Dean Edward's IE7 script. Works wonders on transparent PNGs :)