Grow your CSS skills. Land your dream job.

Does IE antialias objects with PNG backgrounds?

  • # May 23, 2009 at 6:05 pm

    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 :

    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

    # 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.. !! :)

    # May 25, 2009 at 2:10 pm

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

    # May 28, 2009 at 2:06 pm

    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!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".