CSS hover border makes inline elements adjust slightly

Question

I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?

I made a JS Fiddle here.

Answer 1

You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:

http://jsfiddle.net/TEUhM/3/

#homeheader a:visited, #homeheader a{     border:1px solid transparent; }