CSS Vertical Navigation Spacing Issues

**Tom Brazelton** · Oct 19, 2004 09:07

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!

**Paul O'B** · Oct 19, 2004 09:25

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

**Tom Brazelton** · Oct 19, 2004 10:45

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...

**Tom Brazelton** · Oct 19, 2004 10:52

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!

User Tag List

Thread: CSS Vertical Navigation Spacing Issues

Thread Tools

Display

CSS Vertical Navigation Spacing Issues

Bookmarks

Bookmarks

Posting Permissions