Question

I’m making a webpage with a menu using a ul and floated li. To distinguish the active page from other pages, as well as when I hover over a link, the text becomes bold.

The issue that I’m having with this is that when the text becomes bolded, it pushes everything around in the menu. (See: http://jsfiddle.net/tVDaf/)

One possible solution I thought of was to determine the width of each menu item by the size of the bolded text, but I don’t know if that’s possible (at least, without using javascript).

Any suggestions?

Answer 1

I can see three choices for you. The last is probably your best bet:

1. Use JavaScript
2. Use a monospaced font
3. Set a width on the li tags