Menu items moving when one goes bold on hover

[jtwalter]

I am currently experiencing something weird with the menu items on this page: http://www.garrettbe....com/index2.php The borders are just to see the spacing more easily. I set them to go bold on hover, but the problem is all the others move when one is rolled over. This makes sense since they are all relative to one another. It is most notable in Safari. Does anybody have a suggestion as to how I could get around this with a different way of spacing them? Tables? Percentages? A property I'm missing? Thank you for any help! Julian

Edited June 12, 2013 by jtwalter

[hybrid kill3r]

Try adding the "padding" attribute to the anchor within your span tag. E.G. span a { padding: 2px; } This will add space around your anchors so you wouldn't notice the change when hovering. You might have to play with the value of the padding attribute until you achieve the results you want.

[newseed]

He already has padding in his span tag. What you should do it take out the bold for hover or add bold to default link tag. I prefer the latter... a { color: #999999;}a:link { font-weight: bold; text-decoration: none;}a:hover{ color: #000000;} Since the styles above are your defaults you may want to use the div#menu wrapper to define the styles you want to override the defaults thus you keep your current defaults as is and do the following: #menu a { color: #999999;}#menu a:link { font-weight: bold; text-decoration: none;}#menu a:hover{ color: #000000;}

Edited June 12, 2013 by newseed