I am trying to replace text in a span tag with a custom bullet
graphic... while keeping the text and span image on the same line
An example would be:
View Map [bullet img] Email
The below works in IE6 but fails in Firefox and Safari.
For some reason, I can not hide the text in the span tag without
giving the span tag a 'display:block' attribute.
Normally, I use the 'text-indent:-9000em' technique, but have never
tried it in a span.
Without using display:block for the span, the text in the span tag is
not being indented or hidden from view.
Unfortunately, if I use display:block, the bullet img is no longer on
the same line as the 'View Map' text.
With display:block, I get:
View Map
[bullet img]
Email
html:
<p class="directions">
<a href="#">View Map</a>
<span>replace me with a bullet graphic</span>
<a href="#">Email</a>
</p>
css:
.directions {
font: 1.4em/1.2em Georgia, 'Times New Roman', Times, serif; text-
align: center;
}
.directions span {
width:22px; height:21px;
margin: 0 .1em;
text-indent: -9000em;
background: url('../images/bullet.png') no-repeat ;
}
many thanks in advance
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
