Mala Mala - 17 days ago 5
CSS Question

CSS: bolding some text without changing its container's size

I have a horizontal navigation menu, which is basically just a

<ul>
with the elements set side-by-side. I do not define width, but simply use padding, because I would like the widths to be defined by the width of the menu item. I bold the currently-selected item.

The trouble is that in bolding, the word becomes slightly wider, which causes the rest of the elements to shift slightly to the left or right. Is there a clever way to prevent this from happening? Something along the lines of telling the padding to ignore the extra width caused by the bolding? My first thought was to simply subtract a few pixels from the padding of the "active" element, but this amount varies.

If possible I'd like to avoid setting a static width on each entry and then centering as opposed to the padding solution I currently have, in order to make future changes to the entries simple.

Edit: a picture's worth a thousand poorly chosen words:

Answer

http://doejo.com/blog/css-jquery-navigation-with-menu-items-enlarging-on-hover-without-shifting-adjacent-elements is one solution I've found that does exactly what John and Blowski were talking about jscript.