Question

I have an A tag button with Span inside to hold icons. It works well in all browsers. WHen I apply float:right to shift Span to the right side it also works fine in all browsers (Firefox, IE8+, etc.) except IE7 (I know… but I need to fix it).

 <a href="#"><span>&nbsp;</span>Link</a> 

So, IE7 works fine when SPAN is floated left. However, once it is floated right it stretches the A tag container 100%.

I do not wish to change the structure of HTML, i.e. insert another span to handle IE7 only or move SPAN right of text, but I do want to fix it with CSS though what I tried did not work well for me yet.

Test case: http://jsfiddle.net/QeQSQ/1/ (IE7 works OK when SPAN is on left side)

Test case: http://jsfiddle.net/QeQSQ/2/ (IE7 does NOT work because SPAN is on right side and container is stretching)

Answer 1

Position it absolutely instead (example):

a{
    display:inline-block;
    border:1px solid red;
    height:auto;
    width:auto;
    padding:5px;
    position:relative;
    padding-right:1em;
}
a span{
    position:absolute;
    right:0;
    display:block;
    height:14px;
    width:15px;

}

Or, another [better] solution would be to add the character via :before and :after pseudo-elements (example):

<a href="#" class="site">Link</a>
<a href="#" class="account">Link</a>

a{
    display:inline-block;
    border:1px solid red;
    height:auto;
    width:auto;
    padding:5px;
}
a.site:before {
    content:"» ";
}
a.account:after {
    content:" »";
}

Note: This doesn’t work in IE7 at all (no additional text appears), but it also doesn’t introduce any bugs.