Double border size on hover pseudo-class

On my nav bar there are two na开发者_JS百科v links with rounded borders, which when they are hovered, the border size doubles. I can't get it to work without the nav link moving on hover and the hover border doesn't match the area of the original border. I'm sure it has to do with padding but I've tried everything I can think of. See example code - http://jsfiddle.net/mGjs6/3/

---

You need to change

#signup a:hover

to

#signup:hover

and remove the width

#signup:hover {
    border: solid 2px #55971e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

Example: http://jsfiddle.net/jasongennaro/mGjs6/6/

Same with #clientarea

The issue with the not matching up was the one element #signup had the border but then you were changing the border of a child element (a) on hover.

EDIT

As per the comment

However when you hover, the text still moves to adjust for the increased border. The text needs to remain fixed with only the border changing.

That happens because the border size is increasing. That is what is pushing the text down a pixel (that's the increase in border size)

You can't fix that perfectly. Better to change the color of the border or the background.

Example 2: http://jsfiddle.net/jasongennaro/mGjs6/9/

(Hover over both to see the suggestions)

EDIT 3

I figured it out: decrease the padding by a pixel on the hover and it all works

#signup:hover {
    border: solid 2px #55971e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding:3px 4px; //ADD THIS
}

Example 3: http://jsfiddle.net/jasongennaro/mGjs6/10/