SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    ********* Articles ArticleBot's Avatar
    Join Date
    Apr 2001
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Article Discussion

    This is an article discussion thread for discussing the SitePoint article, "Accessible Header Images With CSS And XHTML"

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    London
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like good stuff... my one question is would this be seen as cloaking to search engines?

  3. #3
    Sylvia Baxter
    SitePoint Community Guest
    This article is well written. Even a beginner can understand it. Thank you so very much - you gave me exactly the information I was looking for.

  4. #4
    James McGuigan
    SitePoint Community Guest
    Cloaking is when you send different HTML to a search engine robot than to a human operated broswer.

    A spider will see the same thing as a text only broswer with CSS, Cookies and Javascript turned off - viewing your site in Lynx will give you a good idea of how a search engine will see it.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Singapore
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you have done a good job in creating easy to digest tutorial for image replacement.

    The summing up is very clear.

  6. #6
    ZacParker
    SitePoint Community Guest
    Thanks so much! I've put this method to good use. Very easy to understand, and even easier to appreciate!

  7. #7
    Jennifer W
    SitePoint Community Guest
    What about still using a span for the text, setting the span to display:block and its visibility:hidden; finally, adjust the bottom margin as needed. I just tried it in all our supported browsers - both PC and Mac - including IE 5.2 on the Mac.

    The text still appears in the source, but it's hidden from view.

  8. #8
    Spires
    SitePoint Community Guest
    I design my sites mostly with PNG graphics using alpha backgrounds. Any idea how to not let the header text show through?

  9. #9
    Liam
    SitePoint Community Guest
    THANK YOU !

    worked so well, was searching for an idea for AGES! thank you.

  10. #10
    Jeff
    SitePoint Community Guest
    Can't believe no one has asked this, but is there any way to get this same thing to work when the text-image is also a link? I can get the element to render correctly but it is clickable as a link in neither FF nor IE.

  11. #11
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great article.

    In your example it seems you apply the background image to both the h1 and to the span:

    /* repeated code per header */
    #album, #album span {
    width: 300px; height: 75px;
    background-image: url(header.gif);
    background-repeat: no-repeat;
    }
    Is there a reason why you shouldn't just apply the image to the span only? I have done so, and it seems to work just the same.

    With the image applied to both elements, you have two copies of the same image on the page, one covering up the other. Visually this poses no problem. Download time would not be affected, as it would only be downloaded once. However, would it use up more RAM on the client to display it twice?

    On the flipside, creating a new selector in the CSS file just for the span will add more bytes to download, so maybe what you have done is best.

    I might just be nit-picking here, but as someone concerned with accessibility I feel it is my job to do so!

  12. #12
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You do realise that the article was written in 2004 dont you?!!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  13. #13
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi spikeZ,

    Yes I am aware that the article is not recent, however I still think the content of the article (and of my reply) is still relevant, is it not?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    With the image applied to both elements, you have two copies of the same image on the page, one covering up the other. Visually this poses no problem. Download time would not be affected, as it would only be downloaded once. However, would it use up more RAM on the client to display it twice?
    No there are no additional overheads as the image is only loaded once and taken from cache.

    Sometimes you can make code reductions by grouping things like this and as as you already mentioned another rule would have to be written to supply only the background image to the span.

    It's your own choice really and I don't think there was any other intent in the author's code.


Bookmarks

Posting Permissions

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