Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image replacement on a span not working?

    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:

    Code:
    <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
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •