After attempting to find a solution on my own, I've come to realize that this situation is quite unusual.
The issue at hand involves adding a class to a link using JavaScript (specifically jQuery, although the framework may not be relevant in this case). The class is meant to insert an icon as a background image with some padding. However, on certain links, the padding and background image do not display properly. Oddly enough, this problem arises in IE8 but works fine in IE7. Unfortunately, I am unable to test it in IE9/10. The functionality seems unaffected in Firefox.
To simplify matters, I have stripped down the code to its essentials and created a jsFiddle to demonstrate the problem: http://jsfiddle.net/toxalot/fsdcu/
I will attempt to include the code here for further analysis.
<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>
In the example provided, I have excluded the image and substituted it with a background color for clarity. In IE8, the second link does not have proper right padding initially. Hovering over the link corrects this issue temporarily. Removing the a:hover CSS reveals that hovering no longer rectifies the problem. Altering the float property eliminates the issue entirely. Likewise, removing any other CSS attribute resolves the problem.
As a result, I have identified potential causes of the problem but lack appropriate solutions. Modifying or deleting the existing code is not ideal given its necessity for the website layout. If feasible, I would prefer to augment the existing CSS or JavaScript to address this minor nuisance. Although a relatively minor inconvenience, it remains bothersome. Furthermore, I am curious about whether more recent versions of IE exhibit the same issue.