Does IE antialias objects with PNG backgrounds?

[MaxBlack]

Hello!
I have encountered something I have never seen before, but maybe some of you did. Once again, our favorite browser eases our lives! ;) Here’s my problem.

I’m trying to create rounded buttons with flexible widths using CSS and 24-bit PNG background images. My goal is to have a consistent button design throughout the site, but I want to be able to change the button color only by modifying the background-color property.

Here’s the markup :

Code:

Edit this

The principle is easy : using the sliding door technique, I assign PNG background-images to the link anchor and its nested span to create rounded corners (using solid colors) and add color effects (using alpha-transparency) over the background-color assigned to the container (the anchor).

It looks similar to this :

[img]http://i2.photobucket.com/albums/y39/mangetondisque/Schma1.jpg[/img]

Did you notice how IE displays the whole thing? While Firefox displays the button perfectly, a weird stroke (that isn’t in my image) appears in IE where the two PNG background-images collide. WHAT’S THAT?

It turns out that the left side of the nested span is antialiased (1px wide) while it isn’t in Firefox. IE 6 and 7 do it, haven’t tried version 8. I made another schema to clearly show you the bug i’m talking about. I also have added a 1px left-margin to the nested span to clearly show you what I’m talking about.

[img]http://i2.photobucket.com/albums/y39/mangetondisque/Schma2.jpg[/img]

Does anybody know what’s going on or how to fix it? That would be really helpful :)

Thanks for reading! And more kudos to those who will reply :D

Max

[AshtonSanders]

Wow. Bravo on your excellent documentation.

That is definitely extremely strange. I’ve got a couple ideas:

Have you tried margin-left -1px?
PNG, eh? I’m assuming this PNG extends farther to the left than where the span ends right? Have you tried using a JPG? (I realize this doesn’t help in this case, but it would help see what is causing the problem.)

Let me know,

[MaxBlack]

"AshtonSanders" wrote:

Wow. Bravo on your excellent documentation.

Thank you, just doing my best to help people understand what the issue is without showing too much code :)

"AshtonSanders" wrote:

Have you tried margin-left -1px?

Yup, I did : the overlap "doubled" (2px instead of 1), so no solution there :(

"AshtonSanders" wrote:

PNG, eh? I’m assuming this PNG extends farther to the left than where the span ends right? Have you tried using a JPG? (I realize this doesn’t help in this case, but it would help see what is causing the problem.)

Yep, I also tried JPG and GIF : both act normally, the left border is perfectly cut, no antialias. I also checked my original PNG to make sure I wouldn’t have any weird pixels but nothing, everything is perfect, the only problem is IE.

This issue is a real headache.. !! :)

[AshtonSanders]

hmmmm… Are you using a PNG hack to get the transparencies? If so, have you looked at it without the PNG hack?

[MaxBlack]

I haven’t looked very deeper into the issue ever since but i can say i’m pretty sure that the bug is caused by my PNG hack.

thanks!

[Author]

Posts