SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Des Moines, IA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Vertical Navigation Spacing Issues

    I'm working on my company's internal web site and I am trying to create a vertical navigation menu with rollover effects.

    The rollovers work fine, but I'm having trouble spacing items on the list. Here's a screen capture to show you what I'm trying to do:



    The image on the left is from Firefox. That's how I *WANT* it to look. The image on the right is Explorer - which is what the majority of my company runs on. Close, but no cigar.

    This is the code I'm using to create the menu:

    Code:
    <div id="navlist">
    <ul>
    <li class="padding"><strong><a href="../AIS.cfm">AIS</a></strong></li>
      <li class="padding2"><a href="AIS_Training.cfm"><strong>AIS Training </strong></a></li>
      <li><a href="AIS_CBTs.cfm">CBTs</a></li>
      <li><a href="http://urbtrn01/development/courses.cfm" target="_blank">Course Catalog</a></li>
      <li><a href="AIS_ContactUs.cfm">Contact Us</a></li>
      <li><a href="http://www.iowatec.org/" target="_blank">iTec</a></li>
      <li><a href="AIS_Trainers.cfm">Meet the Trainers</a></li>
      <li><a href="http://urbtrn01/development/schedule.cfm" target="_blank">Schedule &amp; Registration </a></li>
      <br>
    
      </ul>
    </div>
    And here is the style sheet commands I'm using to achieve the rollover effects and spacing:

    Code:
    #navlist {
    position: relative;
    left: 0px;
    top: 0px;
    width: 154px;
    }
    #navlist ul {
    margin: 0px; /*removes indent IE and Opera*/
    padding: 0px; /*removes indent Mozilla and NN7*/
    list-style-type: none; /*turns off display of bullet*/
    font-family: Arial;
    background-color: #CCCCCC;
    border-right: 1px solid;
    border-left: 1px solid;
    border-color: #000;
    }
    #navlist li.top {
    padding: 1px 1px 1px 5px;
    font-size: 14px;
    font-weight: bold;
    }
    
    #navlist li.padding a{
    padding: 1px 1px 1px 5px;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    }
    #navlist li.padding a:hover, a:active{
    background-color: #CCC;
    border: 1px solid;
    border-color: #CCC;
    }
    
    #navlist li.padding2 a{
    padding: 1px 1px 1px 5px;
    font-size: 11px;
    font-weight: bold;
    }
    #navlist li.padding2 a:hover, a:active{
    background-color: #CCC;
    border: 1px solid;
    border-color: #CCC;
    }
    
    #navlist li {
    margin: 0px;
    }
    #navlist a {
    display: block;
    font-size: 11px;
    padding: 1px 1px 1px 10px;
    background-color: #CCC;
    font-weight:normal;
    border: 1px solid;
    border-color: #CCC;
    }
    #navlist a:link, #navlist a:visited {
    color: #000;
    text-decoration: none;
    }
    #navlist a:hover, #navlist a:active {
    background-color: #FF9933;
    border: 1px solid;
    border-color: #000 #FF9933;
    }
    I think the primary concern is within the #navlist li.padding tag, but I'm not sure what I need to insert or remove to make the top two menu items (category listings) behave differently from the remainder of the navigation menu.

    Any insights? Thanks for your help!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ie has some whitepsace bugs causing extra height to be added to the list. You can cure it by adding a space before the closing anchor in each list item (sounds strange doesn't it? but it works).

    You will also need to set the line-height for the anchor and that will force consistency between the browsers.

    copy this code exactly:
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    #navlist {
    position: relative;
    left: 0px;
    top: 0px;
    width: 154px;
    }
    #navlist ul {
    margin: 0px; /*removes indent IE and Opera*/
    padding: 0px; /*removes indent Mozilla and NN7*/
    list-style-type: none; /*turns off display of bullet*/
    font-family: Arial;
    background-color: #CCCCCC;
    border-right: 1px solid;
    border-left: 1px solid;
    border-color: #000;
    }
    #navlist li.top {
    padding: 1px 1px 1px 5px;
    font-size: 14px;
    font-weight: bold;
    }
    #navlist li.padding a{
    padding: 1px 1px 1px 5px;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    }
    #navlist li.padding a:hover, a:active{
    background-color: #CCC;
    border: 1px solid;
    border-color: #CCC;
    }
    #navlist li.padding2 a{
    padding: 1px 1px 1px 5px;
    font-size: 11px;
    font-weight: bold;
    }
    #navlist li.padding2 a:hover, a:active{
    background-color: #CCC;
    border: 1px solid;
    border-color: #CCC;
    }
    #navlist li {
    margin: 0px;
    }
    #navlist a {
    display: block;
    font-size: 11px;
    padding: 1px 1px 1px 10px;
    background-color: #CCC;
    font-weight:normal;
    border: 1px solid;
    border-color: #CCC;
    line-height:1.25em;
    }
    #navlist a:link, #navlist a:visited {
    color: #000;
    text-decoration: none;
    }
    #navlist a:hover, #navlist a:active {
    background-color: #FF9933;
    border: 1px solid;
    border-color: #000 #FF9933;
    }
    </style>
    </head>
    <body>
    <div id="navlist"> 
    <ul>
    	<li class="padding"><strong><a href="../AIS.cfm">AIS </a></strong></li>
    	<li class="padding2"><a href="AIS_Training.cfm"><strong>AIS Training </strong> </a></li>
    	<li><a href="AIS_CBTs.cfm">CBTs </a></li>
    	<li><a href="http://urbtrn01/development/courses.cfm" target="_blank">Course 
    	 Catalog </a></li>
    	<li><a href="AIS_ContactUs.cfm">Contact Us </a></li>
    	<li><a href="http://www.iowatec.org/" target="_blank">iTec </a></li>
    	<li><a href="AIS_Trainers.cfm">Meet the Trainers </a></li>
    	<li><a href="http://urbtrn01/development/schedule.cfm" target="_blank">Schedule 
    	 &amp; Registration </a></li>
    </ul>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Des Moines, IA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for the quick reply.

    Your edit knocked out the space between the "AIS" and the "AIS Training" links at the top of the menu. But the space *above* the "AIS" link listed first is still there...

  4. #4
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Des Moines, IA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, wait. I think I just figured out the problem.

    I removed the <strong> tag from around the first two links (that formatting already controlled in the style sheet) and everything turned out fine!

    Man, IE has some weird glitches!

    I appreciate the help!


Bookmarks

Posting Permissions

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