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.