How to use CSS sprites in table sorting headers? - css

Question

I have a table that gets sorted. The headers have background images (arrows) to show the sorting direction.
The current CSS uses 3 different images like this:
th {
padding-right: 21px;
}
th.sorting {
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting_asc {
background: #ECE0EB url("table-sort-asc.png") no-repeat center right;
}
th.sorting_desc {
background: #ECE0EB url("table-sort-desc.png") no-repeat center right;
}
Working example in the JSfiddle here.
Is there a way to reduce these to one image and use CSS sprites? The problem is that a merged image cannot simply be used as a background to the header cell, because multiple images may become visible at once, like here.
I'd like to avoid using extra elements if possible. IE7 support would be great but I could probably live without it.
Pseudo elements like :after could work, but I can't find a way to position the icons in the same way. JSfiddle example.

Answer 1

I figured out a way for pseudo elements to work. Set the table headers as position: relative, then something like this:
.sorting:before {
display: block;
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 7px;
height: 9px;
margin-top:-4px;
background: transparent url("http://i.imgur.com/iONZm.png") 0 0;
}
The icon is positioned 50% from the top, then moved upward a few pixels to be vertically centered.

Answer 2

You can use SpriteMe to generate sprite images on your site.
.sorting_asc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px 0px;
}
.sorting {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -27px;
}
.sorting_desc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -53px;
}

Answer 3

A quick Google search for a CSS sprite generator comes up with a few options. Though I've never used any of these services myself, I have usually made a single PNG image with transparency. Then you would reference your CSS like this:
th {
padding-right: 21px;
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting {
background-position: -100px -100px;
}
th.sorting_asc {
background-position: -200px -200px;
}
th.sorting_desc {
background-position: -300px -300px;
}
Replace the background-position property values with the appropriate coordinates. I think the CSS sprite services can create these values for you based on their compression once it is done, but the CSS coordinates may need some tweaks to get it exactly how you want.