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 :
<a class=\"button\" href=\"edit-this\"> <span> Edit this </span> </a>
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).
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.
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.)
Thank you, just doing my best to help people understand what the issue is without showing too much code :)
"AshtonSanders" said:
Have you tried margin-left -1px?
Yup, I did : the overlap "doubled" (2px instead of 1), so no solution there :(
"AshtonSanders" said:
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.
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 :
http://i2.photobucket.com/albums/y39/mangetondisque/Schma1.jpg
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.
http://i2.photobucket.com/albums/y39/mangetondisque/Schma2.jpg
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
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,
Thank you, just doing my best to help people understand what the issue is without showing too much code :)
Yup, I did : the overlap "doubled" (2px instead of 1), so no solution there :(
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.. !! :)
thanks!