CSS Hover: Bold changing element size with padding

Question

Alright, of course I understand why this is happening, I'm just hoping there's some creative solution. Let's say I have this element:

.element {
    padding:0 1px;
}
.element:hover {
    font-weight:bold;
}

It's crucial that the padding be in place for visual consistency, but is there some magical way I'm not aware of to lock the element's width down before engaging in the hover behavior?

No JavaScript allowed, unfortunately.

JsFiddle:

http://jsfiddle.net/M9V3Q/

More Info

The client is extremely specific about what they want on certain parts of the site, and the nav is one of them, much to my frustration. They insist on hover being black text on a dark shade of red used in their logo, and they want the buttons to be centered. Since different browsers render text differently, the only way to create a consistent look is to use padding to create the width. Unfortunately, with normal font weight the black is very difficult to read.

Answer 1

You can use this approach:

#hoverEle {
    width: 100px;
}

#hoverEle {
    display:inline-block;
    border:1px solid black;
    padding:3px;
    text-align: center;
}
#hoverEle:hover {
    font-weight:bold;
}

Fiddle: http://jsfiddle.net/M9V3Q/4/

Cons is fixed width.

By the way, I think it is bad idea to focus buttons like this. More beautifull for user will be simple color change (eg #ccc ) and, probably, transition effect. I think it is much more better.

Try this fiddle: http://jsfiddle.net/M9V3Q/9/

I think it is much more beautifull even in this variant :)

Answer 2

Try something like:

.element {
    padding: 0 1px;
    border: 2px solid transparent;
}
.element:hover {
    font-weight: bold;
    border: none;
}

A fiddle: http://jsfiddle.net/F4knz/

Answer 3

Could always try CSS3 box-sizing. It cuts into the elements width etc for padding, border..., and so prevents the element from expanding outside its set width.

Need to prefix -moz- or -webkit- for Firefox and safari.