image replacement on a span not working?

[rossbruniges]

Heya guys,

I am just playing around with some some ideas on a contact page, I have used a dl which includes dd's containing a span within a paragraph like so:

<dt>External Interest</dt>
	<dd><h2>Press &amp; PR</h2><p>Strictly press/media enquiries only</p><p><span class="mail">Web:</span><a href="#">Contact the Press Office via LSBU News Online</a></p></dd>
	<dd><h2>Research</h2><p><span class="tel">Telephone:</span>020 7815 6917</p><p><span class="email">Email:</span><a href="mailto:graces@lsbu.ac.uk">graces@lsbu.ac.uk</a></p></dd>
	<dd><h2>Business Services</h2><p><span class="tel">Telephone:</span>020 7815 6921</p><p><span class="email">Email:</span><a href="mailto:graces@lsbu.ac.uk">graces@lsbu.ac.uk</a></p><p><span class="web">Web:</span><a href="#">Business Services website</a></p></dd>

I want to do some image replacement on the span so we can have a nice icon for the visual design but keep the header (telephone, web...) so screen readers, css-off.

Using my normal image replacement method of text-indent: -5000px isn't working however....

Anyone have any idea's why? It works on the paragraphs but not the spans inside them :<

Thanks for all the help!

[harbingerOTV]

maybe because spans are not block elements like p's are. try adding display: block to the spans your using the image replacement for and see if that does anything. You might have to give an sctually height and width to the span but I dont' know for sure.

[rossbruniges]

Well - I have fixed it as such, probably some browser it won't work in some place but it works for the ones we are targetting ;>

float: left; - so it aligns to the side of the text if refers to
display: block; - so I can use text indent
width: 16px; - so it has a fixed dimension
overflow: hidden; - so the text doesn't show up
text-indent: 20px; - to move the text out the way
background: url(images/telephone.gif) top left no-repeat; - to put the image in!

not very clean but it seems to be working!

thanks for all the advice