CSS Sprites: Image Slicing’s Kiss of Death

by Dave Shea

184 Reader Comments

Back to the Article
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. >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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.