Keep resizing text from pushing the other elements in its container around?

Question

I have the following html

          <div id="menu">
      <ul class="horizMenu">
      <li id="active"><a href="#" id="current">About</a></li>
      <li><a href="#">Archive</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Item four</a></li>
      <li><a href="#">Item five</a></li>
      </ul>
     </div>

and in the css I have

.horizMenu li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}
#menu
{


    text-align:center;
    margin-bottom:10px;
    letter-spacing:7px;
}
#menu a
{
    color:red;

}
#menu a:hover
{
    color:blue;
    font-weight:bold;
}

Everything works pretty well, except that when I mouse over the links, the color changes and it becomes bold, which is what i want, but it also causes all of the other li elements to move slightly and then move back when you mouse-off. Is there an easy way to stop this from happening?

Answer 1

Add a width to the list item elements which is bigger than the bolded width of the items, this way they wont be pushed out of line.

#menu li
{
   width: 150px;
}

Alternatively you could try a monospace font, which wont be affected by the bold/unbold on hover.

Answer 2

Not sure who -1ed, but Mauro's answer is essentially correct: you can't trivially make an item with automatic width depend on what the width would have been if the font inside weren't bold.

However, a 'float: left;' rule will also be necessary as you can't set the width of an inline-display element. And 'em' would probably be a better unit, to make the required width dependent on the font size in the buttons.

Answer 3

I have a similar problem - I have set my text NOT to resize but if my text size is set to smaller or larger, the menu actually sits higher or lower than it's initial position. Why would the menu move up or down if the text size is changed? I thought that setting the height of my div would force it to remain static but that didn't work.