how can we avoid the shake when we hover over an element and set its font to be bold

Question

How can we avoid the shake when we hover over an element and set its font to show bold? Here is a sample of the code I wrote:

http://jsfiddle.net/8v4Ag/

Is there a technique to avoid the shaking? Suppose I hover on LogOff, the font goes bold, but that line of text moves a little to the right due to the text getting emboldened. If we hover away it again shakes.

Is there any CSS way of avoiding such shakes?

Answer 1

If by shaking, you mean the Help or LogOff "boxes" moving when you hover over the other, then you need to widen the LogOff and Help boxes to be bigger than the bolded version.

Answer 2

Some ideas

• easier: just change the color (or background-color) ; instead of black, you set color:#333, and when hovering: #000 - this way the text size does not change.
• a small absolutely positioned div fixed size (width, height) with a higher index at the location where you want the button / text to change. When the size of the div changes a bit, it won't affect the neighbors. This solution requires some cross-browsers testing.

Answer 3

I am not sure what you mean by "shake", I have faced the same issue of buttons getting larger when I have the text bold on hover. I think I ended up "solving" it by changing the design so it didn't require the bold on hover. @ring0's second solution might work, but it would be a pain to implement. I would suggest using his first suggestion, you could even add background images (maybe a gradient) that would change on hover, and change the font-color.

Answer 4

I have solved this by having a non visible duplicate text with the hover style. Use visibility:hidden rather than display:none to make it take up space, and position it beneath the original text. This invisible element will make sure the text is wide enough for the hover state.

Her is an example

Answer 5

If you are determined to use BOLD for hover you aren't going to be able to avoid this problem. Bold and Normal fonts are different fonts so they are NOT going to align perfectly like you want and you'll see this visual effect. If you are using a browser that supports it, perhaps try adding a text-shadow: style on hover instead. Or change color: from gray to black...

Answer 6

You could set a fixed width; however, I would recommend not using a strong styling on the item. I would also not recommend simply changing the color, as this does not address any accessibility issues for someone who is colorblind. If you simply add a border and make the background a bit darker, that should do the trick and be most compatible cross-browsers.

Keep in mind, you will get the same "shake behavior" if you are simply adding a border, so be sure to add a border to match the existing background initially, then change the color of the border upon hover.