css icon height issue

Question

I want to have a standard method of formatting "Show More" links in my HTML pages.

In HTML I use:

<span class="showMore">Show more details</span>

Then in the css, I have:

.showMore {color: #0E4B82; padding-left: 18px; background:url("images/icons/add.png") no-repeat 0px 0px;}
.showMore:hover {color:#F5891D; cursor: pointer; }

where add.png is a 16/16 famfamfam silk icon (http://www.peopleperhour.com/images/icons/add.png). I use JavaScript to expand some content section using an onclick event.

This works nicely in Firefox 3.0.5 but in IE 7 the last few pixels of the icon are chopped off. I'm looking for a workaround. Using height doesn't work on inline elements like spans. Adding a transparent border fixes the issue in IE7:

.showMore {border: 1px solid transparent; color: #0E4B82; padding-left: 18px; background:url("images/icons/add.png") no-repeat 0px 0px;}

But IE6 doesn't handle the transparency. Making the text bigger fixes the problem but I don't want big text. "line-height" doesn't work. Anyone know anything that may help?

Answer 1

Does

display: block;
height: 16px;

Help fix the height of the span?

Answer 2

I've solved the problem. I've no idea why but using "no-repeat center left" instead of "no-repeat top left" ensures IE doesn't chop off the bottom 2px of the icon. Why using center instead of top should result in the image being higher is strange but that's IE for you??

.showMore {color: #0E4B82; padding-left: 18px; background:url("images/icons/add.png") no-repeat center left;}
.showMore:hover {color:#F5891D; cursor: pointer; }