CSS Image Replacement Techniques

Discussion in 'CSS' started by wd_2k6, Oct 28, 2008.

  1. #1
    Hi there,

    OK i'm coming across image replacement in my menus and for headings.

    I have a question, does:

    <h3>MyHiddenText</h3>

    h3 { background(image.gif); text-indent:-9999px; }

    Will this work?

    You see I see people using SPANs for the image replacement is this just for people who have images turned off so they can see the text? Or is a SPAN required, because my example seems to be working, but I have a feeling there's a problem with it (apart from people with images turned off)?
     
    wd_2k6, Oct 28, 2008 IP
  2. Dimmo

    Dimmo Well-Known Member

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    126
    #2
    Well that will work if your font size is equivalent to the height of the image. The reason for the span being used is to set the image parameters separate from the text being used.

    If you read : http://css-tricks.com/nine-techniques-for-css-image-replacement/

    That will explain the various methods you can use as well as the benefits and the setbacks to each technique.
     
    Dimmo, Oct 28, 2008 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey that's a nice link, I guess my technique is technique #3 as on that site, it seems that it works then apart from the CSS on Images off which is what I knew already.

    What is the liklehood of somebody having CSS on and Images off, if they just turn CSS of then they can get a nice list of links, I can understand people saving bandwith but is the option there for some sort of disability?

    If it's just the bandwith savers then i'm prepared to leave it as it is..

    <h3>MyHiddenText</h3>

    h3 { background(image.gif); text-indent:-9999px; }
     
    wd_2k6, Oct 29, 2008 IP