Text-indent on a span not working?

HTML & CSS
1

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!

2

‘text-indent’ applies to block-level elements, table cells and inline blocks. SPAN normally generates an inline box, so text-indent doesn’t apply.

3

Hi,

As Zcorpan already pointed out you can’t use text-indent on inline elements but you could float the span and then the text-indent would take effect because it then becomes a block level box of sorts.

I should point out the IE will allow text-indent to work on spans (even though it shouldn’t) and that ie5.+ will also indent the backgrounds as well meaning that the images you are replacing the text with will also disappear and your viewers in those browsers will get nothing.

4

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

5

display: block;

Floats are display:block by default so that wouldn’t be needed :slight_smile: