Question

I tried searching for an answer first, but this seems to be an edge case.

I’m adding a class to a link via JavaScript (well jQuery actually but I don’t think it matters in this case). The class adds an icon as a background image and some padding. The padding and background image fail to appear on certain links. The problem shows up in IE8, but surprisingly works fine in IE7. I can’t test IE9/10. Works fine in Firefox.

I reduced the code down to a bare minimum and created a jsFiddle that illustrates the problem. http://jsfiddle.net/toxalot/fsdcu/

I’ll try adding the code here.

<style type="text/css">
body { background-color: #fff }
a:hover { background-color: transparent; color: #c30 }
ul { padding-left: 40px }
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc }
</style>
<ul>
    <li style="float: left"><a class="iconNewWindowLeave" href="#">left link</a></li>
    <li style="text-align: right">some stuff on the right</li>
</ul>
<ul>
    <li style="float: left"><a class="linkExternal" href="#">left link</a></li>
    <li style="text-align: right">some stuff on the right</li>
</ul>
<script type="text/javascript">
$('.linkExternal').each(function() {
    $(this).addClass('iconNewWindowLeave');
});
</script>

I’ve removed the image from the example and added a background color for illustration. In IE 8, the second link doesn’t have right padding. Hovering over the link, adds the padding. If I remove the a:hover CSS, hovering doesn’t correct the problem. If I remove the float, the problem goes away. If I remove any of the other CSS, the problem goes away.

So I’ve narrowed down the cause(s), but I don’t know what to do about it. I don’t want to remove or change the existing code. It’s all required for the site layout. If possible, I’d like to add some CSS or JavaScript to fix it. It’s a minor issue, but it’s bugging me. I’m also curious as to whether or not the problem appears in newer versions of IE.

Answer 1

try to add : a display:inline-block; or display:block; to .iconNewWindowLeave

.iconNewWindowLeave { padding-right: 15px; background-color: #ccc; display:inline-block; }

(not tested)