Image Replacement in a span tag: Fails in FF works in IE6

[grahama]

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 :)

[Setek]

The reason this fails in Firefox is rightly so, because a

span

is an inline element.

One way you can get this to work is to set the element to display as block, and then float it left so that it sits 'inline' with the other two words :)

Also, since I'm at it, if this is just a decoration, couldn't it be done another way?

If the bullet itself requires no actual text, and is just a decoration, why have it show in the markup at all?

Why not just:

<ul>
<li><a href="#">View map</a></li>
<li id="email"><a href="#">Email</a></li>
</ul>

... and build it ground up, with the bullet as a picture on one of the items?

ul { list-style: none;
  margin: 0; }
ul li { display: inline; }
ul li#email a { padding-left: 15px;
background: url('/images/bullet.jpg') no-repeat 0 5px; }

Wouldn't that work better, -plus- be more semantic for those reading the website with their ears?

[edited by: Setek at 6:15 am (utc) on Nov. 29, 2006]

[grahama]

thanks:)

That explanation made a lot of sense...and totally helps a CSS noob such as myself

g