Border rendering issue in IE

Question

I'm having the weirdest issue in IE (7, specifically) when implementing CSS borders. I first noticed this a few months ago.

The CSS is literally this: #donate {border:1px solid #299ae5;}

As you can see from the attached image, both of these screenshots were taken in IE7, from the same website, different pages - same template file. It's like the border has a "tail" in the bottom left corner.

Does anyone have any insight about this???

Edit: Here is the HTML (although I've seen this also on random sites in IE7 recently on input fields as well)

<li><a href=""><span>Donate</span></a></li>

And here's the CSS:

li { display: inline; }
li a { color: #fff; display: block; float: left; margin-right: 8px; padding-right: 8px; line-height: 1.2em; }
li a span { background: url(bg-gradient.png) repeat-x 0 0; border: 1px solid #299a35; padding: 1px 5px 2px 4px; }

Thanks in advance!

Answer 1

I tend to use display:inline-block...the only other thing I'd change is making the anchor the button rather than the span. here's a quick example http://jsfiddle.net/3x4fR/2/