a:hover border problem

[mickwine]

I have the following css for a list of links:

#promo ul {list-style-type:none;font-size:11px;}
#promo ul li a {color:#fff;display:block;height:1%;padding:.6em .5em;text-decoration:none;}
#promo ul li a:hover {background:#0082ae;border-bottom:2px solid #006393;border-top:1px solid #30aecd;}

My problem is that because there is only a border on the a:hover, when you hover the text of the link moves down to incorporate the border. Is there a way to increase the height of the li a so that the text doesn't move when you hover over it?

[mickwine]

Ok. I'm a moron. I fixed it. Just adjusted the padding to compensate for the border. So made the corrected code:

#promo ul li a {color:#fff;display:block;height:1%;padding:8px 6px 8px 6px;text-decoration:none;}
#promo ul li a:hover {background:#0082ae;border-bottom:2px solid #006393;border-top:1px solid #30aecd;padding:7px 6px 6px 6px;}

Duh. Sometimes the easiest solution is hardest to see.