TutorialMeta
Ad

CSS Menu Displays Incorrectly In Safari

- 1 answer

I have written a CSS menu for a site I am helping develop, and it displays correctly in both IE 7 and Firefox 3 (on Windows XP).

The intended effect is that the drop down menus should be as wide as the widest element in them (but not wider). In Safari, however, they appear to be roughly twice as wide as they should be. I have no clue as to how to fix this. Any help?

The HTML is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="mainContainer">
  <div id="mainNavContainer">
    <img id="leftNavImg" src="imgsrc.jpg" alt="ignore me for now" height="34" width="91">
    <div id="topNav">
      <ul>
        <li><a target="_blank" rel="nofollow noreferrer" href="#">Menu Item 1</a><ul>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">Submenu Item 1.1</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">Submenu Item 1.2</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">Submenu Item 1.3</a></li>
        </ul></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="#">Menu Item 2</a><ul>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">Submenu Item 2.1</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">Submenu Item 2.2</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">Submenu Item 2.3</a></li>
        </ul></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="#">Menu Item 3</a><ul>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">Submenu Items may have different lengths</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">short</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">or potentially moderately long</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">The submenu should be as wide as its longest item</a></li>
        </ul></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="#">etc...</a><ul>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">Submenu Item 4.1</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">Submenu Item 4.2</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#">Submenu Item 4.3</a></li>
        </ul></li>
      </ul>
    </div>
  </div>
</div>
</body>

and the CSS is

  * {
    margin: 0;
    padding: 0;
  }
  ul, ol, dl, li, dt, dd {
    list-style: none;
  }
  body {
    background-color: #fff;
    margin: 20px;
    text-align: center;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
  }

  #mainContainer {
    width: 975px;
    background-color: #fff;
    text-align: left;
    margin: 0 auto;
    position: relative;
    padding-top: 52px;
  }
  #mainNavContainer {
    height: 34px;
    font-size: 11px;
    width: 973px;
    border: 1px solid #dedede;
    background-color: #888;
    position: absolute;
    top: 0;
    color: #000;
  }
  #mainNavContainer #leftNavImg {
    padding: 0 20px 0 7px;
    float:left;
    border-right:1px solid #dedede;
  }

  #topNav {
    float: left;
  }
  #topNav ul {
    display: inline;
    text-align: center;
  }
  #topNav li {
    display: block;
    float: left;
    position: relative;
    border-right: 1px solid #DEDEDE;
    width: 102px;
  }
  #topNav li ul {
    display:none;
    border-bottom: 4px solid #422952;
    position:absolute;
    top: 35px;
    left:0px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    z-index:100;
  }
  #topNav li li {
    display:block; 
    border-right: none;
    border-bottom: 2px solid #622952;
    background-color:#FBFBFB;
    width: 100%;
    font-size: 12px;
  }
  #topNav li a, #topNav form {
    text-decoration: none;
    display:block;
    color: #000;
    padding: 11px 6px;
  }
  #topNav li li a {
    padding: 9px 6px;
    color: #666;
    width: 100%;
  }
  #topNav a:hover {
    color: #fff;
    background-color: #824972;
  }
  #topNav li:hover ul {
    display:block; 
    z-index:100;
  }
  #topNav li li a:hover {
    background-image:none;
    background-color:#fff;
    color: #000;
  }
Ad

Answer

Move the

white-space: nowrap;

from

#topNav li ul { ...

to

#topNav li li a { ...

cheers!

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad