Does IE antialias objects with PNG backgrounds?
# May 23, 2009 at 6:05 pm
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:
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 :
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.
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# May 23, 2009 at 8:21 pm
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,# May 25, 2009 at 9:52 am"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.. !! :)
You must be logged in to reply to this topic.