SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast id="omg"'s Avatar
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image replacement css buttons and "images off"

    Is there a css image replacement method for navigation buttons which will still show the text when a user has images disabled? I've been looking about but not found anything so far...


  2. #2
    SitePoint Enthusiast id="omg"'s Avatar
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope still can't get it even though I thought I had with the span, thanks to fekn Internet Explorer the piece of #@*&%$!!!

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use the Gilder/Levin Method of CSS Image Replacement which uses an empty span element, because it's the method that's still usable with the images disabled and CSS enabled scenario, which to me is more important than the empty span elements.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Enthusiast id="omg"'s Avatar
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Kravvitz
    I use the Gilder/Levin Method of CSS Image Replacement which uses an empty span element, because it's the method that's still usable with the images disabled and CSS enabled scenario, which to me is more important than the empty span elements.
    I had been using that but it wasn't playing fair with rollover buttons due to the links. However I've come up with this solution.

    I've only tested in Firefox 1.5, Opera 9 and IE6 so there could be (fixable) issues elsewhere. Feel free to check the code and suggest changes (anyone) as I'd like to improve it further before I use it.

    However if this has been done before, a link to an example would be great so I can check it out

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What problems were you having?

    Your demo doesn't seem to work in IE5.x/Win.
    It works in Opera 7+, although in Opera 7.0x and Opera 7.1x the second background image doesn't show until you rollover it.

    For some reason in Netscape 6.0 through 7.1 the text appears above the span. I suggest you add top:0 to the rule for "a span".
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Enthusiast id="omg"'s Avatar
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like there was a typo in the css, could you try it again in IE5? Currently I'm not able to test in IE4/5 for some unknown reason.

    I found the span got in the way of the a:hover if I used the Gilder/Levin method as normal. Not sure I have a problem anymore to be honest as this works (in modern browsers).

    Just tested in Safari and Omniweb on OSX (not sure which versions they are) and it works fine.

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, that didn't fix it in IE5.x/Win

    "a#hover span" should be "a#over span"

    Try adding this
    Code:
    /* \*/
    * html a span {
    	height: 25px;
    	}
    /* */
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    You'll find an updated technique based on this at http://www.ryznardesign.com/web_codi...ent/index.html

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've been using a similar method for years (even before they coined a name for it lol )

    http://www.pmob.co.uk/temp/navimagereplace.htm

    Basically the same anyway

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link, Tyssen.

    Not quite, Paul. Your code is closer to the Gilder/Levin method. The Gilder/Levin/Ryznar methods have some differences. Read the following quoted paragraphs.
    An em element is used instead of a span in these versions because in both the negative margin method and the absolute method, a span will not be clickable in Mac IE5.x if used as a link. However, unlike spans, em elements function reliably in Mac IE5.x as well as all the other browsers.

    The inline element (the em) must appear before the heading text or a number of problems occur: the background header image will not appear in IE5.0mac if used in a float and the hx tag looses its height in IE5.1mac. This is why the inline element (the em tag) has been placed before the heading text in the source.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •