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.