CSS Sprites in a UL

[Stennis]

Hello, I’m trying to get familair with css sprites, but after trying to use it on a UL i encounter a problem. It works perfectly once the LI is only one line. But when it becomes two lines the browser is showing me the image under the one im using from the sprite.

so once I use two lines (in html) for li.meet it shows the li.plan icon aswell.

css snippet:
.iconlist li.meet
{
background-image: url(images/csssprite.png);
background-position: -10px -100.5px;
background-repeat: no-repeat;
}

.iconlist li.plan
{
background-image: url(images/csssprite.png);
background-position: -10px -152.5px;
background-repeat: no-repeat;
}

[Paulie_D]

We’d need to see the html (link available?) to help further but I think it’s probably the whitespace between the lines of code.

I think you can set the display css on the li elements to inline-block or float them left and this will help.

[Stennis]

Here is an image that should clear things up a bit. Note that I did not set the right padding/margin yet so positioning of the list image is not final.

http://itcrowd.nl/img/html.jpg

What I would like: The little calender should be positioned in the center of the li. Without sprites I would do backgrond-position: 0 50%;

[Paulie_D]

It will be the whitespace. If you need to have list items that cover two lines, you should separate them by a break

Some Text
Some more text

[wolfcry911]

I don’t think it’s the whitespace Paulie.

@Stennis, I believe the sprite needs to be changed to include more space between the icons to allow for conditions like you encountered. Of course, this method won’t center the image on the li. To accomplish centering, you may need to change the sprite to be horizontal rather than vertical. In this case, you would need a large amount of space between the icons in the sprite to account for the width of the list, but it would work. Even though the sprite would extremely long, I believe its file size could still be optimized to make the the sprite a better option than individual background images.

[TheDoc]

When these types of situations come up I realize that sprites aren’t for everything. If you *really* wanted to use a sprite you could use a pseudo element like :before to create an object that uses the sprite as a background image. If you position it correctly (and give it a width and height) you can mimic the effect that you’re going for.

[Johnnyb]

In this situation I usually just use an empty span tag before the strong tag and apply the sprite background image to that instead. It would result in a small amount of unsemantic markup, but in my opinion it’s worth it to save yourself 8+ HTTP requests.

[TheDoc]

@Johnnyb – I think that’s where it’d be better to use :before. No added markup.

[Author]

Posts