Why does the "in" icon on my web page appear in the wrong place in IE8, but not firefox or chrome?

Question

On my web page, I have a link to my LinkedIn profile in the Resume section that uses their icon.. Under Firefox and Chrome, it appears in the correct spot, between a pair of square brackets. However, under IE8 (I haven't tried IE7), the icon appears a couple lines below the brackets.

I validated against the w3.org CSS and HTML validators, and it comes back clean from both.

What gives?

Answer 1

That's why IE is so weird to debug. Try with LI { padding: 0.0em }