Horiz CSS menu - text shifting on bold hover?

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.

1 as Andrew says, the bold text is wider. Fact of life. Even fix the width of the menu items to avoid this or live with it (recalculating padding is imprecise and error prone).

– cletus Feb 17 '09 at 11:04 Yep, I tend to avoid the bold mouseover effect for this reason. – Steve Wortham Jun 10 '09 at 17:48.

I would advice against switching fonts(°) on hover. In this case it's just the menu items moving a bit, but I've seen cases where the complete paragraph gets reformatted because the widening causes an extra word wrap. You don't want to see this happen when the only thing you do is move the cursor; if you don't do anything the page layout should not change.

The shift can also happen when switching between normal and italic. I would try changing colors, or toggle underline if you have room below the text. (underlining should stay clear from the bottom border) I would be boo'd if I used switching fonts for my Form Design class :-) (°) The word font is often misused."Verdana" is a typeface, "Verdana normal" and "Verdana bold" are different fonts of the same typeface.

One line in jquery: $('ul. Nav li a'). Each(function(){ $(this).parent().

Width($(this).width() + 4); }).

This is the method I have used. – GateKiller Nov 30 '10 at 16:46.

Instead of fine for default and bold for hover, I use gray for default and black for hover on my site. I use bold for indicating to which menu item the current page belongs.

I had a problem similar to yours. I wanted my links to get bold when you hover over them but not only in the menu but also in the text. As you cen guess it would be a real chore figuring out all the different widths.

The solution is pretty simple: Create a box that contains the link text in bold but coloured like your background and but your real link above it. Here's an example from my page: CSS: . Hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; } .

Hyper { position: absolute; z-index: 1; } Of course you need to replace #FFFFE0 by the background colour of your page. The z-indices don't seem to be necessary but I put them anyway (as the "hypo" element will occur after the "hyper" element in the HTML-Code). Now, to put a link on your page, include the following: HTML: You can find foo herehere The second "here" will be invisible and hidden below your link.As this is a static box with your link text in bold, the rest of your text won't shift any longer as it is already shifted before you hover over the link.

Hope I was able to help :). So long.

If you're not averse to using Javascript, you can set the proper width once the page is shown. Here's how I did it (using Prototype): $$('ul. Nav li').

Each(this. SetProperWidth); setProperWidth: function(li) { // Prototype's getWidth() includes padding, so we // have to subtract that when we set the width. Var paddingLeft = li.

GetStyle('padding-left'), paddingRight = li. GetStyle('padding-right'); // Cut out the 'px' at the end of each padding paddingLeft = paddingLeft. Substring(0,paddingLeft.

Length-2); paddingRight = paddingRight. Substring(0,paddingRight. Length-2); // Make the li bold, set the width, then unbold it li.

SetStyle({ fontWeight: 'bold' }); li. SetStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'}); li. SetStyle({ fontWeight: 'normal', textAlign: 'center' }); }.

Simply don't do this. It's distracting and ugly. And there is no way around to fix it.

I really can't stand it when someone tells you not to do something that way when there's a simple solution to the problem. I'm not sure about li elements, but I just fixed the same issue. I have a menu consisting of div tags.

Just set the div tag to be "display: inline-block". Inline so they sit next to each other and block to that you can set a width. Just set the width wide enough to accomodate for the bolded text and have the text center aligned.(Note: It seems to be stripping out my html below, but each menu item had a div tag wrapped around it with the corrasponding ID and the class name SearchBar_Cateogory.

Ie: HTML (I had anchor tags wrapped around each menu item, but I wasn't able to submit them as a new user) Sermons| Illustrations| Videos| PowerPoints| Scripture| CSS: #ROS_SearchSermons { width: 75px; } #ROS_SearchIllustrations { width: 90px; } #ROS_SearchVideos { width: 55px; } #ROS_SearchPowerPoints { width: 90px; } #ROS_SearchScripture { width: 70px; } . SearchBar_Cateogry { display: inline-block; text-align:center; }.

1 If you want to show code, wrap the code into a code block. You can find it in the toolbar on the editor, or indent the block with at least 4 (?) spaces. – Erik van Brakel Sep 29 '09 at 13:28.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.