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/