Horiz CSS menu - text shifting on bold hover

Question

Hi there,

I created a horizontal CSS menu using HTML lists.

i.e

<ul id="navigation">
<li id="youarehere"><a href="#">Home</a></li> 
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
</ul>

ect...

Everything works as it should, expect when you hover over the links. You see, I created a bold hover state for the links, and now the menu links shift because of the bold size difference.

I've searched everywhere for a solution, and can't find one. Surely, I can't be the only one trying to do this.

http://www.sitepoint.com/forums/showthread.php?t=593181

I encounter the same problem as the post above. However, the post does not have proper solution. Does anyone have any ideas?

P.S: I don't know the width of text in menu and so I cannot just set the width of li.

This is my code:

HTML:

              <ul class="nav">
                <li class="first"><a href="#">item 0</a></li>
                <li><a href="#">item 1</a></li>
                <li><a href="#">item 2</a></li>
                <li><a href="#">item 3</a></li>
                <li><a href="#">item 4</a></li>
              </ul>

CSS:

              .nav {    margin:0; padding:0; }

              .nav li { list-style:none; display:inline; border-left: #ffffff 1px solid}

              .nav li a:link, .nav li a:visited {   text-decoration:none; color:#ffffff; margin-left:8px; margin-right:5px;}

              .nav li a:hover{ text-decoration:none; font-weight:bold; }

              .nav li.first {border:none;}

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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: oopen div id="ROS_SearchSermons" class="SearchBar_Category" close div. )

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; }

Answer 5

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 <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

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

Answer 6

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' });
}

Answer 7

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

Answer 8

One line in jquery:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});