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 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts

    H8 image replacement

    I know it's been a topic all over the place. I have tried several techniques so I'm not sure if this way has already been tried or not. I know a lot of the techniques fail in certain browsers and all those browser specific techniques are well and good but...

    If you all could do me the favor and test it out on other browsers just to see how it works, it would be appreciated.

    image replacement test

    So far it works on:

    IE 6
    Mozilla 1.7.5
    Firefox 1.0.2

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It works in Opera 8, but it fails the images on / CSS off situation
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Extra span

    ... and has superfluous markup.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.mezzoblue.com/tests/revis...e-replacement/

    I prefer Phark Revisited:

    Code:
    <h3 id="header">
    	Revised Image Replacement
    </h3>
    
    /* css */
    #header {
    	text-indent: -5000px;
    	background: url(sample-opaque.gif);
    	height: 25px;
    	}
    Yours has an extra tag (an empty span, even!) and the CSS for it is rather bulky. Despite all that, it still doesn't solve the images off/css on issue. The Gilder/Levin and the Shea Enhancement method (which use the same markup as yours) do.


  •  

    Posting Permissions

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