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

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 2

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 3

try using this menutext { line-height: 10px; /* or whatever */ }

and also, to set the width of a inline element, use display: inline-block;

float:left might be not so friendly, if you do use it and it messes things up use clear:both

Answer 4

I've just had the same problem. A solution I thought of, and might use from now on, is to use text-shadow instead.

a:hover {
  color:blue;
  text-shadow:0px 0px 1px blue;
}

The text will look a little blur though. If you set the 3rd parameter to 0, text won't be blur but will look just a little bit bolder.

I'd say this is better than dealing with width-dynamic texts.