www.webdeveloper.com
Results 1 to 4 of 4

Thread: nav menu has spaces

  1. #1
    Join Date
    Nov 2004
    Posts
    160

    nav menu has spaces

    hello! my navigation menu has spaces between the items when viewed in IE and I'm not sure why. It lines up as expected when viewed in firefox. Anyone see anything in the CSS that might cause that?

    Code:
    /* Root = Vertical, Secondary = Vertical */
    ul#navmenu,
    ul#navmenu li,
    ul#navmenu ul {
      margin: 0;
      border: 0 none;
      padding: 0;
      width: 160px; /*For KHTML*/
      list-style: none;
    }
    
    ul#navmenu li {
      display: block !important; /*For GOOD browsers*/
      display: inline; /*For IE*/
      position: relative;
    }
    
    /* Root Menu */
    ul#navmenu a {
      border: 1px solid #FFF;
      border-right-color: #CCC;
      border-bottom-color: #CCC;
      padding: 0 6px;
      display: block;
      background: #EEE;
      color: #666;
      font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
      text-decoration: none;
      height: auto !important;
      height: 100%; /*For IE*/
    }
    
    /* Root Menu Hover Persistence */
    ul#navmenu a:hover,
    ul#navmenu li:hover a,
    ul#navmenu li.iehover a {
      background: #CCC;
      color: #FFF;
    }
    
    /* 2nd Menu */
    ul#navmenu li:hover li a,
    ul#navmenu li.iehover li a {
      background: #EEE;
      color: #666;
    }
    
    /* 2nd Menu Hover Persistence */
    ul#navmenu li:hover li a:hover,
    ul#navmenu li:hover li:hover a,
    ul#navmenu li.iehover li a:hover,
    ul#navmenu li.iehover li.iehover a {
      background: #CCC;
      color: #FFF;
    }
    
    /* 3rd Menu */
    ul#navmenu li:hover li:hover li a,
    ul#navmenu li.iehover li.iehover li a {
      background: #EEE;
      color: #666;
    }
    
    /* 3rd Menu Hover Persistence */
    ul#navmenu li:hover li:hover li a:hover,
    ul#navmenu li:hover li:hover li:hover a,
    ul#navmenu li.iehover li.iehover li a:hover,
    ul#navmenu li.iehover li.iehover li.iehover a {
      background: #CCC;
      color: #FFF;
    }
    
    /* 4th Menu */
    ul#navmenu li:hover li:hover li:hover li a,
    ul#navmenu li.iehover li.iehover li.iehover li a {
      background: #EEE;
      color: #666;
    }
    
    /* 4th Menu Hover */
    ul#navmenu li:hover li:hover li:hover li a:hover,
    ul#navmenu li.iehover li.iehover li.iehover li a:hover {
      background: #CCC;
      color: #FFF;
    }
    
    ul#navmenu ul,
    ul#navmenu ul ul,
    ul#navmenu ul ul ul {
      display: none;
      position: absolute;
      top: 0;
      left: 160px;
    }
    
    /* Do Not Move - Must Come Before display:block for Gecko */
    ul#navmenu li:hover ul ul,
    ul#navmenu li:hover ul ul ul,
    ul#navmenu li.iehover ul ul,
    ul#navmenu li.iehover ul ul ul {
      display: none;
    }
    
    ul#navmenu li:hover ul,
    ul#navmenu ul li:hover ul,
    ul#navmenu ul ul li:hover ul,
    ul#navmenu li.iehover ul,
    ul#navmenu ul li.iehover ul,
    ul#navmenu ul ul li.iehover ul {
      display: block;
    }
    This is the actual HTML

    HTML Code:
    <ul id="navmenu">
       <li><a href="#">Locations +</a>
    		<ul>
    		 <li><a href="#">Salt Lake City, UT +</a>
    			<ul>
    			  <li><a href="#">Home</a></li>
    			  <li><a href="#">Maps</a></li>
    			  <li><a href="#">Weather</a></li>
    			  <li><a href="#">Amenities</a></li>
    			  <li><a href="#">Fast Food</a></li>
    			  <li><a href="#">Specials</a></li>
    			  <li><a href="#">Service Center</a></li>
    			  <li><a href="#">Contact</a></li>
    			</ul>
                   </ul>
    </ul>
    Oh god, please kill me now :/
    Why oh why did I learn SQL instead of Javascripting?

  2. #2
    Join Date
    Nov 2004
    Posts
    160
    heres a link that demonstrates the menu, look at it in IE and in Firefox and you'll see what i mean by "Spaces"
    http://www.myasp-net.com/cssmenuhori...horizontal.htm
    Oh god, please kill me now :/
    Why oh why did I learn SQL instead of Javascripting?

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    ul#navmenu li {
      display: block !important; /*For GOOD browsers*/
      /* display: inline; */
      float:left;
      position: relative;
    }
    At least 98% of internet users' DNA is identical to that of chimpanzees

  4. #4
    Join Date
    Nov 2004
    Posts
    160
    Quote Originally Posted by Fang View Post
    Code:
    ul#navmenu li {
      display: block !important; /*For GOOD browsers*/
      /* display: inline; */
      float:left;
      position: relative;
    }

    You Rock! Thanks so much!
    Oh god, please kill me now :/
    Why oh why did I learn SQL instead of Javascripting?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles