Hi,
I am trying to place a background image of an right-facing arrow on an
anchor tag.
The HTML markup looks like this:
<div class="viewAllLink"><a href="../gallery/index.html">See All
Galleries</a></div>
The CSS looks like this:
.viewAllLink a {padding: 4px 20px 0 0; background:
url(../i/green-arrows.gif) center right no-repeat; font:normal 13px
"Tahoma", verdana;}
This works in IE6, IE7, IE8, and FF3, but not Safari 3.x. In Safari,
the link text overlaps the background image like this:
http://stephentang.info/safari/test.jpg
The only way I could solve this was to add a span tag inside the
anchor and attach the background image on that.
The HTML markup is now:
<div class="viewAllLink"><a href="../gallery/index.html"><span>See All
Galleries</span></a></div>
The CSS looks like this now:
.viewAllLink a span {padding: 4px 20px 0 0; background:
url(../i/green-arrows.gif) center right no-repeat; font:normal 13px
"Tahoma", verdana;}
It seems that Safari's idea of how padding works on the anchor tag is
different than the other browsers I tested. In all the other
browsers, the padding applies inside the anchor tag, which pushes the
link text away from the background image. In Safari, the padding
applies outside of the anchor tag, so the background image is
obfuscated by the text. The padding just pads the anchor tag relative
to its parent element.
I tried to find if this was a known issue online, but I couldn't find
anything. Can anybody else confirm how Safari 3.x interprets padding
in this case?
Thanks,
Stephen
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
