IE8 li menu is jumping on mouseover

i have a big problem with a menue ONLY in IE8 - all other browsers work perfect:

There's an menue like this one:

<ul>  
<li><a href="link.html">Point 1</a></li>  
<li><a href="link2.html">Point 2</a></li> 
</ul>

and the CSS is this one:

ul li { padding-left: 23px; line-height: 29px; }

ul li:hover, 
ul li.active { background: url(../images/bg_arrow_blue.png) no-repeat top left; }

ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; }

ul li a:hover, 
ul li a.active { border-bottom: 1px solid red; }

So now - in IE 8 i have the problem, that on mouseover the links jumps up and down on mouseout, because of the border-bottom i think. All other browsers do it right with border bottom and no jump.

I have googled a lot and not found a solution.

Hope anyone here can help!

Thank y开发者_如何学编程ou so much.

Sascha

Okay,

for anyone who's interested - i have the solution:

ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; padding-bottom: 1px; }

i just had to add a "padding-bottom: 1px;" to the "ul li a" statement.

Have a nice christmas.