<th> My Heading <a href="#" class="sort-asc" title="sort">Sort Asc</a> </th>
I want to apply CSS to .sort-asc to replace the text "Sort Asc" with a custom 16x16 sort glyph image (/images/asc.png), placing the image directly to the right of the text. Is it possible?
NOTE: I can't change the markup. I can only apply styles; the following is my feeble attempt:
a.sort-asc {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url("/images/asc.png") no-repeat;
}
Currently, the image shows up all the way to the left of the table header cell. I need it to the right of the text "My Heading".
-
Remove float and display:block for the text to appear next to the "My Heading" text.
Travis Heseman : Just did and now the image shows up behind "Sort Asc". I don't want "Sort Asc" to show up at all.Vincent Ramdhanie : Try setting the color of the text to the same color as background - This is a bit ugly but... color:#FFFFFF; background-color:#FFFFFF; -
If you remove the display block, you won't be able to set your width, height or use text-indent to hide the copy within the A. Try changing display:block to display:inline (since you're floating) instead - it may give you what you need.
Travis Heseman : Changed "display: block;" to "display: inline;" - no change.Kobi : `Display` has no impact on floated elements, afaik.na_user : Well, to be fair, it does - it fixes double float bug margins on floated elements in IE6.Kobi : Fair enough. Welcome to Stack Overflow. -
a.sort-asc { width: 16px; height: 16px; padding: 0; display:inline-block; text-indent: 200px; overflow: hidden; background: url("/favicon.ico") no-repeat; }Removed float - you don't need it, it's on the right position. Text indent does nothing with
inline, tryinline-block: http://jsbin.com/abemeAnother hack is to add
color: transparent, and a small size, but that too hacky.
0 comments:
Post a Comment