CSS Sprites: Image Slicing’s Kiss of Death

by Dave Shea

184 Reader Comments

Back to the Article
  1. Janos, I believe there is something wrong with your settings, I viewed both your link and Dave’s, and neither of them had any delay in IE 6.

    Copy & paste the code below to embed this comment.
  2. Will whoever is trolling my SF History board please stop. I know this is off topic but they are people from this ALA forum with the I.P. Addresses:
    81.5.138.228
    172.194.21.72 (someone named Mikey)
    I’m assuming the latter is the one who posted the “I love PPK” trash. Please stop. I will stop trolling here if you stop on my site.
    Ray, Spook and Mickey please stop. If you want to deal with me email me, don’t post rubbish on my SF History site. Just because I might troll here is no excuse for you to do the same.

    Thank you.

    Copy & paste the code below to embed this comment.
  3. I’m not sure that this technique is the end-all be-all solution that others are making it out to be.  There’s a sweet spot in a page’s design where multiple connections to a webserver will almost certainly result in a faster display of images than this will.

    Consider this: you have an extremely image-heavy page, with a few nav items that each have a largish filesize.  By concatenating all of these nav items together, you need to wait until the entire file downloads before displaying any of the images.  On the other hand, with multiple connections to a webserver, your nav items will be guaranteed to show up as soon as they are downloaded.  If your nav item is over 2k, for instance, the image header filesize overhead is negligible.

    This is the age-old serial vs. parallel debate, just in graphic format.  If establishing parallel connections requires just a bit more overhead, and bandwidth is constant, what’s the point at which a serial connection is a better idea?  For smaller pages, sure, knock yourself out, but for any decently-sized page (say 40k or larger) I just don’t see this method as speeding up rendering times at all.

    Copy & paste the code below to embed this comment.
  4. Loved the article, only problem now is I have to go and RE-DESIGN my image maps! But probably a good idea to do so anyway.  I was also intrigued by the other recent article on image maps (see: http://www.alistapart.com/articles/imagemap/)

    One question though.

    In the blob example by using appropriate title tags one can get the name of the link to pop up but I wanted to employ the effect used by eric meyers (old but tested method) of pop up text (see:
    http://www.meyerweb.com/eric/css/edge/popups/demo.html) so that the link name would appear somewhere else on the page, BUT I can’t seem to get it to work in using this method?  Is it because it is within a list?  Should I give up? is there another more ingenius way?

    I’m NO expert with css but I love trying out the new methods people keep coming up with on alistapart, GREAT site.

    Copy & paste the code below to embed this comment.
  5. Marko:
    My behavior (.htc) doesnt solve the delay but the flicker. The delay is beacuse IE downloads every time the image again and again.
    1. Mouseover/mouseout
    2. IE:Turns of the image
    3. IE downloading the image (the delay)
    4. download complete IE show up the image

    Sam Ingle:
    If you set the cache properties in IE to “every visit” (or something like that) you should see the effect. (image flicker or text shows up)

    More about flicker in IE:
    http://www.fivesevensix.com/studies/ie6flicker/

    Copy & paste the code below to embed this comment.
  6. This one is an excellent idea for my site, which can be used to select Eastern, Central, Mountain and Pacific zones in the United States before selecting specific States. I would appreciate to know the quick summary of Pro/Con of that design for all browsers wherever possible? I aim to satisfy my audience to the best possible, even for text-based lynx users.

    Copy & paste the code below to embed this comment.
  7. Sorry to wander off-topic again, but remember this is supposed to be a discussion. Everyone doesn’t have to like what has been presented. If Dante doesn’t feel that this is a worthwhile use of ALA’s bandwidth, then so be it. He’s entitled to his opinion, even if you don’t agree with it.
    I know I don’t. This is an interesting visual design element. And let’s face it, Lynx compatibility and standards compliance aside, visuals are what draw in your guests, almost as much as your content. And that’s my opinion.

    Copy & paste the code below to embed this comment.
  8. “I will stop trolling here if you stop on my site… Just because I might troll here is no excuse for you to do the same”

    So you admit to trolling. Sigh…

    If people are trolling your site, they’ve as much right as you have to troll here. But remember the ALA text at the top of this page: “We reserve the right to delete flames, trolls, and wood nymphs.”

    Bye.

    Copy & paste the code below to embed this comment.
  9. I just tried out this technique on a site that has buttons which require a number of states: normal, hover, selected, and disabled. What I found most useful was the ability to add and modify the button states just by swapping out one image. That way, I know that I’ve updated all the states of all the buttons and won’t be surprised by a rollover state on a selected button that has the old font, for example.

    Copy & paste the code below to embed this comment.
  10. Nice Work Dave!!

    And the CSS has given me a completely new set of ideas to play around with.

    Thanks and lot fo sharing it.

    Copy & paste the code below to embed this comment.
  11. The problem I have is that markup that consist of a list of empty links is rather useless when I am using a screen reader or have CSS turned off. Furthermore, a sliced image would give me alternative texts for every image.
    Now, to change this all we need to do is to add a text in the “slices” and hide this text with another FIR technique, for example
    http://www.kryogenix.org/code/browser/lir/ .
    Wouldn’t that be a better solution, as it does fall back to a fully accessible list of links no matter what I do?

     

    Copy & paste the code below to embed this comment.
  12. Just read this great article and ran away and tried out an idea it gave me for transposing manuscript text with typed text – check it out:

    http://www.mch.govt.nz/mch-only/olde-text.html

    very rough and ready, but only took me about 15 minutes and would be easy enough to tidy up.

    I can see whole new worlds opening up, thanks!

    Copy & paste the code below to embed this comment.
  13. I never said I didn’t like the technique. It’s a bit too complicated for me, but still I like it. I don’t think I’ll ever need to use it in practice, though. But ya never know.
    I was thinking of bringing Javascript into the mix, not for the rollovers but maybe for clipping. Not at all sure how I’d do this.

    Copy & paste the code below to embed this comment.
  14. Jamie, that’s a very interesting experiment. Although you might be accused of “dumbing down” text for readers. (“Why can’t they just learn to read the original script!”)

    This is the kind of dynamic effect that can only occur on the web, not in print. I’m all for it. But is there a way to make the rollovers bring up standard text, not images? (Perhaps using generated content.)

    Copy & paste the code below to embed this comment.
  15. Won’t this bloat the data? Instead of having lots of small files to be loaded, a big one has to be loaded hundreds of times.

    Copy & paste the code below to embed this comment.
  16. Chris, thanks for your comments.
    It ain’t so much about dumbing down as about making it readable for those who can’t see so good.

    I like the idea of doing it with real text in theory, but can’t really see a way of doing this and staying with pure css and static html – especially given the way different browsers display fonts etc.

    I’ve just modified it slightly so there is a no-style version now – this divides the text into a bulleted list which is a bit odd, but much better than nothing. Would be interested to here other’s suggestions for how to do this better:
    http://www.mch.govt.nz/mch-only/olde-text.html

    Copy & paste the code below to embed this comment.
  17. Very nice effect! but has anyone successfully tweaked it so that images can be printed out?

    Copy & paste the code below to embed this comment.
  18. Well, the thing that bugs me is that we add links that lead nowhere for a visual effect. In your case, it is not wise to make the flowing text a list, but if you use this technique to spice up a navigation, then we would need it.

    It once again boils down to hover effects on elements that are not clickable being misleading. If every browser supported hover on every element, that’ll make it easier.

    Copy & paste the code below to embed this comment.
  19. I just added the text and the technique described at
    http://www.moronicbajebus.com/playground/cssplay/image-replacement/

    to create a real navigation with this:

    http://icant.co.uk/buttons.html

    works in IE6 and Opera7 here. The only problem is the same with every IR technique apart from the javascript ones, that it fails visually when images are turned off. When Images are turned off and CSS is turned off it is fine again (easily testable with opera)

    Copy & paste the code below to embed this comment.
  20. It is realy great example . Long time ago when I
    have seen Pixys original way I made this , it dont look like css , but it is . Has three state like normal button . So here it is http://www.kralovskydvur.com/dynamiccss/ahover.htm
    . Please wait a bit for image 24kb

    Copy & paste the code below to embed this comment.
  21. It’s funny how Web Standards promoters contradict themselves. WaSP and PTG says that Web Standards will lead to simpler, cleaner, and leaner documents. However they encourage as to use uls for every sort of list, adding a lot of extraneous markup. Funny.

    That aside, the desicion on wether to use lists for this or not could go either way. I would just use a DIV with maybe some spans. Maybe lists would be better, since they have shorter names (UL and LI as opposed to DIV and SPAN).

    Just thought I’d wrap up this argument.

    I even thought or using an IE behaviour htc to do this, but that would be too browser-specific.

    Copy & paste the code below to embed this comment.
  22. Until navigation list (NL) is added to all browsers, then I don’t think designers have a better choice than unordered list. Semantically speaking, a list of links would be the best scenario for establishing a navigation set in terms of raw HTML [for non-visual users].
    Dante-Cubed, this code is far, far, far cleaner then any image map method of old or relatively new. Though personally I’d like to see a way to keep the text in the anchor, it is still technically correct code.

    Copy & paste the code below to embed this comment.
  23. Though personally I’d like to see a way to keep the text in the anchor, it is still technically correct code.
    edit: Without having to embed a span inside the anchor.

    Copy & paste the code below to embed this comment.
  24. Dante wrote:
    >>>
    It’s funny how Web Standards promoters contradict themselves. WaSP and PTG says that Web Standards will lead to simpler, cleaner, and leaner documents. However they encourage as to use uls for every sort of list, adding a lot of extraneous markup.
    <<<

    Of course people use simplifications. It’s not technically true that web standards automatically lead to cleaner documents; e.g. of course if you have a valid document and remove the doctype (thereby making it non-standard), it’s going to be smaller in filesize. But in making the case for web standards, it would be too time-consuming to include all such little gotchas. The listener would lose interest before the speaker had a chance to get to the good parts.

    It’s also an unfortunate fact that the term “web standards” is widely used as if it meant “purely semantic XHTML code coupled with CSS”. Font tags might be looked down upon even among the most passionate CSS haters, but they’re still part of a so called web standard (they’re officially called “recommendations” by their creators). So, web standards can actually lead to terribly bloated code if you use the “wrong” standards (or even the “right” standards) the “wrong” way.

    Anyway: Using ul:s for every sort of list is NOT “adding a lot of extraneous markup” (though it could be “adding wrong or vague markup” if there’s a better list type than ul available). For the last time: A list is a list and should be marked up as a list, just as a paragraph should be marked up as a paragraph.

    (It could be argued that the written content of a page is technically a list of paragraphs, but that, IMHO, is not the semantic definition of a list in HTML. The items in a list should have something relevant in common other than all being parts of the content.)

    So, no, “Web Standards promoters” do not contradict themselves in this case.

    Copy & paste the code below to embed this comment.
  25. Well conceived and beautifully written Dave! Here’s a short FIR-based modification for Opera 6.

    Change the background position for the ul element to reveal the hover image instead:

    #skyline { width: 400px; height: 200px; background: url(test-3.jpg) 0 -200px no-repeat; margin: 10px auto; padding: 0; position: relative; }

    Adjust the widths of the list elements to add up to the full 400px width of the ul element:

    #panel1b { left: 0; width: 96px; }

    #panel2b { left: 96px; width: 76px;/*formerly 75px*/ }

    #panel3b { left: 172px; width: 111px;/*formerly 110px*/ }

    #panel4b { left: 283px; width: 117px; }

    Finally, add these background postions for each list id tag‘s a element:

    #panel1b a { background: transparent url(test-3.jpg) 0 0 no-repeat; }

    #panel2b a { background: transparent url(test-3.jpg) -96px 0px no-repeat; }

    #panel3b a { background: transparent url(test-3.jpg) -172px 0px no-repeat; }

    #panel4b a { background: transparent url(test-3.jpg) -283px 0 no-repeat; }

    That‘s it. Hope somebody finds this helpful.

    Copy & paste the code below to embed this comment.
  26. A Text replace version for images off, css on mode.
    And a possible solution for printable version with CSS content property. (Only works with Opera7)

    http://www.hszk.bme.hu/~hj130/css/list_menu/meh_menu/

    I have created a DHTML behavior to reduce flicker in IE, fortunately that is good for printable version too…)

    Copy & paste the code below to embed this comment.
  27. >Anyway: Using ul:s for every sort of list is NOT “adding a lot of extraneous markup” (though it could be “adding wrong or vague markup” if there’s a better list type than ul available).<

    Oh, there is: The Menu tag. It’s just like UL but has no bullets. Since most people “tame” the lists by removing bullets it doesn’t seem to be a problem. Of course if you DID want bullets you could always do:
    menu {
    display: list-item;
    }
    <menu>
    First Item

    Next

    </menu>

    You make the call.

    Copy & paste the code below to embed this comment.
  28. Menu is deprecated. Never seen it used myself.

    http://www.w3.org/TR/html4/struct/lists.html#edef-MENU

    Copy & paste the code below to embed this comment.
  29. …Menu is deprecated but still works. Just because something is “deprecated” doesn’t mean you shouldn’t use it. It should make a comeback.

    Copy & paste the code below to embed this comment.
  30. HTML Lists degrade wonderfully”
    Not in NN4.x. Nothing happens at all, and all you see is part of the image.

    Copy & paste the code below to embed this comment.
  31. If you check the definition of the word deprecated

    http://dictionary.reference.com/search?q=deprecated

    I think you will see that it in fact does mean just that.

    Copy & paste the code below to embed this comment.
  32. There’s a reason why things become deprecated.  Usually it’s because something better has come along.  With the menu element and the ul it’s kinda like leaded and unleaded gas.  Most sensible people understand (well…those with half a brain anyway) the drawbacks of using leaded gasoline.  Sure…leaded gas is still available here and there.  That’s called backward compatibility.  However, just because it’s still available does not mean you should still use it given the choice.

    Could you imagine the crap that would be in the air if we all still used leaded gasoline.  Think how bad it would be in a large city of several hundred thousand.  Say a city like San Francisco.  It wouldn’t be as beautiful as it is today with all kinds of cars running around using leaded gasoline.  Leaded gasoline is still available “here and there” as a transition.  The only people using leaded gasoline are those with antique automobiles, those that can not afford to buy a new auto and those that don’t give a shit about community.  Either you understand that or you don’t.

    Copy & paste the code below to embed this comment.
  33. “Though personally I’d like to see a way to keep the text in the anchor, it is still technically correct code.
    edit: Without having to embed a span inside the anchor.”

    As posted here earlier for review:
    http://icant.co.uk/buttons.html
    has exactly that.

    We should stop wasting time on useless discussions if lists or menus are correct and stick to the topic at hand.

    /me puts the lid on the box with trollnip

    Copy & paste the code below to embed this comment.
  34. Although <menu> may be used, despite being deprecated, I try to follow the advice of the W3C myself. At the base of the page I linked to earlier, they say:

    “We strongly recommend using UL instead of these elements.”

    Copy & paste the code below to embed this comment.
  35. hi there again, a few days ago i posted here about this technique.
    if i put the code in a linked css it’s not showing anymore the picture.
    i could not find out why.

    now i’m almost finish with my first complete css designed web site, but a lot of adjustment for browsers compatibility.

    and just about ths technique, it’s working well almost everywhere but bug comletely on opera mac ( the latest version )
    is ther a work around ?

    could somebody tell me as well if they are good places where show your web sites to get some help debugging. i start going crazy…

    Copy & paste the code below to embed this comment.
  36. Dante wrote
    >>>
    Menu is deprecated but still works. Just because something is “deprecated” doesn’t mean you shouldn’t use it.
    <<<

    As has been pointed out, that’s EXACTLY what it means.

    At any rate, we’re talking about saving a few bytes per page. You might as well start removing all the line breaks from the source. Contrast that to the tens of kilobytes (per page) of unnecessary tables and font tags that “web standards promoters” (WSP) are usually talking about when they mention bloated code.

    You see what you’re doing here, Dante? First you say (or at least imply) that WSP are over-zealous. Then you imply that they’re not zealous enough.

    Copy & paste the code below to embed this comment.
  37. What I meant to say was that even though MENU is deprecated, it is still supported by browsers to provide backwards compatibility. I think even though some tags like XMP have been deprecated for years, they’ll be supported by IE for many years to come for backwards compatability. You can still use MENU. Besides, if it’s deprecated it won’t do anything. You can have semantics (UL becomes the much more semantic MENU) and use CSS to control what it does.
    If you’re crazy enough you could do this:
    <HTML xmlns:DC>
    Blah blah
    <DC:Menu>
    Menu here</DC:Menu>
    Anything you want
    <DC:Navbar>
    </DC:Navbar>

    Copy & paste the code below to embed this comment.
  38. http://www.quirksmode.org
    For all your browser quirks

    Copy & paste the code below to embed this comment.
  39. Chris,
    I don’t understand how you’re making the text between the <a> tags invisible without the span tag… I tried “overflow: hidden;” in the <a> definition but it didn’t seem to do anything. Is there something else working in conjunction with this?

    I’d like to stay away from
    span {display: none;}
    because screen readers can’t see the text.

    Copy & paste the code below to embed this comment.
  40. Use this:
    A {
    text-indent: -100em;
    }
    I believe this is called the Leahy-Landridge hack.

    Copy & paste the code below to embed this comment.
  41. For those of us not skilled at visualizing code and too lazy to type it in, a link to an example would be helpful.

    …Browser

    Copy & paste the code below to embed this comment.
  42. If you want an example of how one of the points mentioned in this article is wrong, view the examples with Netscape 4. They do not degrade gracefully. In NN4 all you see is part of the image and nothing else. No plain ULs. No behaviour. A better way would be to import the styles so Netscape 4 can access plain content instead of almost nothing.

    Copy & paste the code below to embed this comment.
  43. Not just a major step forward but a beatifully written piece as well. Thanks so much for the goft of pleasure in addition to the knowledge!

    Copy & paste the code below to embed this comment.
  44. That was a great article, didn’t really know that you could do that with CSS.

    Copy & paste the code below to embed this comment.
  45. Hey Dante-Cubed! Now someone wants to make a whole site using nothing but lists!

    http://www.burned.com/absolutelists.php

    Inspired by Tantek Celik no less.

    Copy & paste the code below to embed this comment.
  46. I saw that. I’d expect to see that ludicrisy on Evolt.

    Copy & paste the code below to embed this comment.
  47. You rant about alistapart on evolt and you rant about evolt here. Both refused to publish articles by you. You whiningly announced you will retire from writing online articles, if that is all you can contribute here, then please retire from posting.

    Copy & paste the code below to embed this comment.
  48. I didn’t mean my above post in a bad way. What I meant was that Evolt always has stuff that you won’t find anywhere else, or stuff that might not make much sense. I do have a right to criticize.

    I contribute a lot. If you look at the Zebra Tables comments you’ll see just that.
    Whining? I have a few responses to that but that belongs in email, as I said earlier.

    Copy & paste the code below to embed this comment.
  49. ..Two sentences is not a rant.

    Did you write EasyCMS, Chris? It’s pretty cool.

    Copy & paste the code below to embed this comment.
  50. On page 11 of these comments, Jamie Mackay posted a great link to an experiment using rollovers to allow people to decipher a piece of script text, by hovering over the lines. I’ve just come across another great example like this. (I would have emailed this to Jamie, but don’t know his email address.)

    http://stunicholls.myby.co.uk/menu/alice.html

    Copy & paste the code below to embed this comment.
  51. I’ve used the methods described to make the following page:
    http://test.irregular.ch/hover.html
    I had to use z-index several times so that the tiny pieces can be selected too

    Copy & paste the code below to embed this comment.
  52. For the stuff I do, I’d name this one of the top 3 articles on A List Apart easily.  Not only is this innovative and clean, it’s better than Javascript and saves n00b schmucks like me from having to learn it!  Ha ha :)

    Copy & paste the code below to embed this comment.
  53. Used your technique to change this site’s Navigation from damn old JavaScript and 16 GIF-Files to some lines of slim CSS-Code and ONE GIF-File. I love it!

    Copy & paste the code below to embed this comment.
  54. http://www.scherenburgfestspiele.de/html2004/index.html

    Copy & paste the code below to embed this comment.
  55. I agree this was a better solution tha javascript—kinda.
    It’s a lot more complex; you must know the correct coordinates for the position.
    Javascript is meant for adding usability anyway. Just don’t get too carried away with ditching [removed] you’ll need it eventually.

    Copy & paste the code below to embed this comment.
  56. So, has anyone found a nice way to not only fix the flicker, but get past IE having to download the image every time?

    I was really hot about this idea until I noticed that IE 6 completely ruins it. It makes fast hovers impossible, yet again.

    I’ve heard the discussion about using fir, but I have yet to see an example targetted at rollovers using this method.

    Anyone figured it out yet?

    /dak

    Copy & paste the code below to embed this comment.
  57. Excellent work, Mr. Shea, and thanks for sharing.

    With this tutorial in mind, I retired to my CSS laboratory and started experimenting; I took a couple of accessbility aspects from Prof. Bowman’s “Sliding Doors” technique and cross-bred them with “CSS Sprites”.  Then I started testing the thing in the various major browsers – here’s a code overview;

    <body>
    <h1 class=“alt”>My Website Name</h1>
    A brief welcome message.
    <ul id=“site-navigation”>
      <li>
      <h2><span class=“alt”>Section 1</span>
      Section description and overview.
      </li>
      <li>
      <h2><span class=“alt”>Section 2</span>
      Section description and overview.
      </li>
      <li>
      <h2><span class=“alt”>Section 3</span>
      Section description and overview.
      </li>
      [Etc…]
    </ul>
    <div id=“main-content>
      [Blah blah blah…]
    </div>
    </body>

    OK, I think that’s pretty self-explanatory; if you have CSS on, you get a very nice graphical top bar.  If you switch CSS off, you get neatly structured text.  Trouble is, it’s working fine (on Windows) in Firefox 0.8, IE5.5 and IE6.0.  Where the wheels seem to fall off is when you view the thing in IE5.01…although the initial (i.e. “off” state) display is perfect, the rollover image only appears on click, and then stays highlighted until anther link is clicked.

    It’s puzzling, because Dave’s final (map) example works perfectly in IE5.01 on my machine, so it’s not a settings issue.  I’ve tried removing everything from each list item except for the link itself – replicating Dave’s final example almost to the letter – and still it (mis)behaves the same way.  What might I be missing or doing wrong, any thoughts?

    Copy & paste the code below to embed this comment.
  58. Ever trying to maximise CSS, this article was just what I was looking for. Simple but really effective.

    I went and changed a rollover navbar immediately and was very pleased with the results.

    Thanks!

    Copy & paste the code below to embed this comment.
  59. <voice accent=“irish”>
    project lead: ‘What’s that ya have?’
    developer: ‘CSS.’
    pl: ‘CSS. BRILLIANT!’
    pl: ‘What do ya do with it?’
    developer: ‘Well, I have found a way to make rollovers using only one image.’
    pl: ‘And you make rollovers work in many browsers using only one image no matter where you are?’
    developer: ‘Yes.’
    pl: ‘Make CSS rollovers using one image…BRILLIANT!’
    </voice>

    Copy & paste the code below to embed this comment.
  60. Great technique, except that Google’s spider seems to skip over empty <a > tags.  This makes sense, I suppose, but it means that if you’re implementing this and you care about whether or not spiders and blind people can view your site, you should probably include a hidden version of your navigation at the top of the page.

    Copy & paste the code below to embed this comment.
  61. This is gonna save me a lot of time on some upcoming sites.

    I’m very impressed at the ingenuity shown here. Well done!

    Copy & paste the code below to embed this comment.
  62. It’s so cool!

    Copy & paste the code below to embed this comment.
  63. Firstly, excellent article – I hadn’t thought of doing things this way.

    Here’s my attempt, which uses the initial idea along with a number of bits of advice which have been mentioned in this discussion.

    http://www.plexusmedia.co.uk/rollovermap.html

    The graphic used is
    http://www.plexusmedia.co.uk/images/hovermap.gif

    Browsers tested on
    PC – IE6, Firefox
    Mac – IE5, Safari 1.2, Firefox .08

    Lessons I’ve learnt in this are:-

    1- Because this map is a lot more complicated than the Blobs example, I needed to create 4 versions of the graphic rather than 3, as Inverness-shire was surrounded by so many other counties. The image is now a whopping 60k. However, I could go through it chopping out lots of areas in the 3 rollover maps and turning them white which would reduce the filesize. As Scott suggested earlier in this thread, I could go through the image deleting everything from the rollover state versions except the yellow bits, and then move them all up nearer the normal map and redo all the arithmetic. I’d guess the image size could be as little as 20k.

    2- I’ve seen mention of using z-index to bring some of the smaller areas to the fore. I don’t think it’s needed – what I’ve done here is shuffled the <li>s around – the later ones seem to have the equivalent of the highest z-index.

    3- I’ve added title=“Shetland” etc to the <a >s for alt tags

    4- I’ve used the a {text-indent: -100em;} hack as suggested by Dante-Cubed (there was something useful amongst all the vehemence) so that I can add text links in the <a></a> tags. Hopefully this would give a navigable list if the styles are not used.

    The only annoyance for me is that the arithmetic is a pain in the arse. What I want now is someone to design some software to make it easy, in the same way as something like Globalscape’s Cutemap does for normal image maps.

    cheers

    Garve

    Copy & paste the code below to embed this comment.
  64. Comment from the sliding doors article:-

    “Switching IE to not check the page for newer content every time removed the image flicker problem.”

    Should apply here too I would think.

    Copy & paste the code below to embed this comment.
  65. The best reason to use, say, a 500×50 image instead of 10 50×50 images is because for every image, the server sends a bunch of headers to the client before sending the image, and the client pauses to see if the image has been cached or modified since it was last cached, and then it signals the server to continue downloading if it needs the new version.

    This is very slow when there are a lot of images. The menu on my website uses 58 images just for the buttons (there are 23 buttons, if I remember right). It takes forever to load the damn thing… but a single image would load much quicker.

    Also, everyone knows the problem of image rollovers—you need to pre-cache the rollover image in JavaScript or it won’t be loaded until you move the mouse over it. A sprite map fixes that problem.

    Otherwise it was a really great article… it occured to me that something like this would be great but I didn’t think it could be done with CSS.

    Copy & paste the code below to embed this comment.
  66. how can we make it work

    Copy & paste the code below to embed this comment.
  67. I Cant get to work a vertical menu with this method.  someone can help me?

    thank you

    MAt

    Copy & paste the code below to embed this comment.
  68. Thanks for this nice article!

    Copy & paste the code below to embed this comment.
  69. Hi there,
    I’ve found that Safari on OS 10.2.8 has problems with returning to the normal state after the hover. This has something to do with position:relative of the <ul> but I can’t figure out a way to circumvent that.

    Does someone maybe have a fix for?

    Anyway, the article is great.

    Copy & paste the code below to embed this comment.
  70. Chris Fam’s comment from March 12th,

    “has anyone successfully tweaked it so that images can be printed out?”

    is a major issue that, amazingly, no one has addressed. Without a work-around for this I wouldn’t recommend using this method.

    Is there a solution to this problem?

    Copy & paste the code below to embed this comment.
  71. I have already post my ideas:
    http://www.hszk.bme.hu/~hj130/css/list_menu/meh_menu/
    But no comments arrived :(

    To print the image use CSS content property. But create image content is only supported in Opera7.
    (This can be the solution in the future.)

    For IE use a DHTML behavior that adds a layer with the image under the link. When the background-image is not visible thhis image will show up.

    Copy & paste the code below to embed this comment.
  72. Yeah it sucks CSS3 content is only supported by “Opera 7”

    Copy & paste the code below to embed this comment.
  73. Do the browsers load the background-images when they find them in the css-code? Otherwise it would cause the rollover to lag.

    Copy & paste the code below to embed this comment.
  74. For those noticing Internet Explorer flickers, please head over to my site and read the latter half of this post:

    http://www.mezzoblue.com/archives/2004/04/08/ie_vs_image_/

    IE is acting in error and hitting up the server when it shouldn’t; a few lines in your .htaccess file will fix this right up.

    Copy & paste the code below to embed this comment.
  75. I’ll say from the outset that I’m not especially good with CSS. ;)

    I can’t work out how to translate this to a vertical list of links, like thus:

    link 1
    link 2
    link 3

    …instead of the horizontal way this example is set out. I’ve tried changing the “left: x; width: x” to “top: x; height: x”, and the different offsets, but Safari doesn’t even register there being links there. Doing it horizontally, as demonstrated here, works fine. Thanks in advance!

    Copy & paste the code below to embed this comment.
  76. Yo. Anyway know the css code, for changing the state of an image defined by a CSS class, to have a border shown when the user places the mouse over the image?

    Copy & paste the code below to embed this comment.
  77. Yo. Anyway know the css code, for changing the state of an image defined by a CSS class, to have a border shown when the user places the mouse over the image?

    Copy & paste the code below to embed this comment.
  78. This guy has done it with a vertical list of links, but they’re not in a list … just stacked anchors.

    http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/example.html

    The tute:
    http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

    Copy & paste the code below to embed this comment.
  79. This article is amazing, the writing of the tutorial is also outstanding. I had it working in a complex layout in no time. The code is rock solid, very stable.

    Thanks Dave for taking the time to document this incredible technique!

    Copy & paste the code below to embed this comment.
  80. Fantastic!

    I’ve only been doing full CSS-based design for a few weeks, but I’m loving it!

    There’s a submission for CSSZenGarden from me in Dave’s inbox (we can but try!) and my menus are going to look fantastic now that we’ve been let in on that little gem!

    PLEASE keep up the hard work everyone- it’s our future!

    (and Dave, accept my submission… I’m sure I can find out where you live…)  lol

    (I’m REALLY just kidding. really.)

    :D

    Coos

    Copy & paste the code below to embed this comment.
  81. I just cannot get my head around translating this to a vertical list. :( Thanks for the link, Mike, but that’s not quite what I’m looking for.

    Can someone have a look at http://www.virtualwolf.org/new/ and tell me where I’m going wrong?

    Many thanks!

    Copy & paste the code below to embed this comment.
  82. Oh yes, and would it be better to have the rollover side of the image to the right of the normal one, or below it?

    Copy & paste the code below to embed this comment.
  83. Hey VW, not managed to get this fully underway myself, but did gather that you can put the image anywhere you like- left, right, top bottom…. it’s all a maths game.

    As long as the position attributes for the images in both states correspond with what you want to see in said states, your laughing.


    As for the vertical lists, I’m still trying to crack that myself, but I did see one used on http://www.CSSZenGarden.com  
    Have a little browse through to see if you can spot it (I’ll have another look myself)
    (could it be ‘display: inline;’?)

    All the best ;)

    Copy & paste the code below to embed this comment.
  84. And what do you know,,, it was on this site!  (well durr!)

    http://www.alistapart.com/articles/practicalcss/  when it loads run your search function (usually ‘ctrl’+‘f’ [find]) to locate the words ‘Checking it Twice…’

    It’s right there.

    (Normally, a nice touch with css is that if an element has an ‘id’ attribute, you can use it as an anchor to that direct part of the page. That page just didn’t seem to have any!)

    Further reading on that point… http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2.3
    ‘…because the W3C aren’t f***ing about…’ (quote:Me, just now.)

    I’m off to bed, but no doubt CSS won’t let me sleep AGAIN.

    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

    Coos

    Copy & paste the code below to embed this comment.
  85. >Hey VW, not managed to get this fully underway myself,
    >but did gather that you can put the image anywhere you
    >like- left, right, top bottom…. it’s all a maths game.

    Aye, that’s what I figured, but I can’t work it out. Instead of having “left” and “width”, you’d think you’d have “top” and “height”, but it doesn’t work. I end up with the entire navigation image being linked as the bottom (contact) link, and the whole lot mouseovers at once…

    And setting it to inline instead of block doesn’t work either. :(

    Copy & paste the code below to embed this comment.
  86. http://www.alistapart.com/articles/taminglists/

    I’m working on this one at the moment, but I’m gonna need to turn off http://www.monkeyradio.org to concentrate!

    Copy & paste the code below to embed this comment.
  87. Great article am experimenting with this right now but am having problems centering the list. I have gone to many resources and use the text-align:center trick for IE and the margin:0px auto for all others.  In all other browsers except IE the list is centered. 
    But in IE it is always about 30 picels off to the right forcing the user to scroll in 800×600 resolutions

    Anyone have any good links or solutions to centering this list?

    Copy & paste the code below to embed this comment.
  88. I am trying to learn as much as possible about CSS. I have been using Dreamweaver & Fireworks for about 5 years. I am currebnlty converting our website to all CSS.  However, althoguh I keep hearing about “sprites” I have no idea what they are. It appears to be some kind of image.  Could you please clarify so I can understand what you are doing. I find that those who are familier with a technology often forget that those who are still learning may not yet know all the jargon, much of which is not in the reference books.

    Copy & paste the code below to embed this comment.
  89. Sie sind auf der Such nach einer Kreditkarte oder suchen ein geeignetes Zahlungsmittel für den Urlaub. Mit einer Kreditkarte (englisch: credit cart) haben sie genau das richtige gefunden. Wir bieten ihnen eine Barclaycard an, diese kombiniert Mastercard und Visa in einer Karte. Wollen sie hingegen Urlaub machen und abnehmen ist Fastenwandern genau das richtige für sie. Fasten und wandern sie, Fastenwandern in den Vogesen ist gesund und macht spass. Bücher, DVDs, kann man online einkaufen, dort gibts alles günstig auch Software ohne Versandkosten. Besuchen sie Bücher, DVDs günstig kaufsonline machts möglich.

    Copy & paste the code below to embed this comment.
  90. I really like this idea…however I wanted to see if it really degraded to an unordered list in Netscape 4.7 (mac). It doesn’t.

    Now, I don’t intend on caring too much about this browser, but I’ve been reading Zeldman’s book and this website and have loved them both simply because they present new techniques that can transcend all the difficulties I’ve been experiencing.

    How come the sprite technique doesn’t just show up as an unordered list for me in NS4.7 Mac?

    Copy & paste the code below to embed this comment.
  91. Always looking for new ways in which to implement CSS and this certainly is a good one. I’ve already played about with it and found it quite easy and it seems to be an extremely good way to present things.
    Wonderful tutorial, many thanks.

    Copy & paste the code below to embed this comment.
  92. Hello, studying your great tutorial and trying to get to the same results I have some big problems with this button-thing. Even with a exactly same picture and your css-code (!) I don’t get to the same result… How do you count the values for the image itself and the borders and how do you get this image in the middle of the page without coding it???
    I’m willing to learn but now I need a litte or more help. Thanks a lot!

    Copy & paste the code below to embed this comment.
  93. Hello, in the meantime paul o’brien from sitepoint helped me with my centering-problem. Shorthand-coding is not my speciality… (margin top and bottom with px and right/left with “auto”).
    The rest of the story I solved with a little help from my partner who askes the right questions. But I still don’t understand why you used the dummy-background-image for the ul – that makes no sense to me. Also the 1px add to the width of the picture/ul I see but don’t understand.
    So if you, dave, or somebody else could explain me, I would appriciate!
    Susanne

    Copy & paste the code below to embed this comment.
  94. Once again you guys really make me feel like an amateur.

    Just when i thought i had a handle on it….

    Copy & paste the code below to embed this comment.