- This topic is empty.
-
AuthorPosts
-
May 23, 2009 at 6:05 pm #24937MaxBlackMember
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: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 #58051AshtonSandersParticipantWow. 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 #58129MaxBlackMember"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 #58145AshtonSandersParticipanthmmmm… 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 #58310MaxBlackMemberI 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!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.