Width of container determined by bolded text

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?

There is no easy CSS solution to this problem. It's simple to fix with JavaScript. — thirtydot, Apr 12 '12 at 14:16
I tried using JavaScript, and it still doesn't look good: http://jsfiddle.net/thirtydot/tVDaf/1/. The distance between the links differs because each word grows a different amount when bold. My advice: use a different hover effect. — thirtydot, Apr 12 '12 at 14:21
I hate to use javascript for something this simple but the solution that you provided is good enough. Thanks, thirtydot! — sgcharlie, Apr 12 '12 at 19:45

score 1 · Accepted Answer · answered Apr 12 '12 at 14:19

1

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

Use JavaScript
Use a monospaced font
Set a width on the li tags

answered Apr 12 '12 at 14:19

jeremyharris

7,884
22
31

score 0 · Answer 2 · answered Apr 12 '12 at 14:20

0

The only really way to do this is to set each li to a certain width because right now it is set to be the width of the anchor inside of it. it is generally not good practice to bold over the anchors but instead change the colors.

answered Apr 12 '12 at 14:20

chadpeppers

2,057
1
20
27

score 0 · Answer 3 · answered Apr 12 '12 at 14:25

0

A quick dirty hack (to escape javascript), try to reduce padding on hover.

answered Apr 12 '12 at 14:25

Pratyush

5,108
6
41
63

score 0 · Answer 4 · edited May 23 '17 at 12:27

If you cannot set the width, then that means the width will change as the text gets bold. There is no way to avoid this, except by compromises such as modifying the padding/margins for each state.

all the credits of this answer are for Andrew Vit if it helped you vote up his comment here: Inline elements shifting when made bold on hover

and please search the forum before posting because i've seen this one coming by alot

Width of container determined by bolded text

4 Answers4