CSS Staircase Issue

HTML & CSS
1

After toying around with this css and my html doc for about an hour I need more help. IE 7 & 8 show my tabbed navigation with about 1/4th of an additional inch that firefox, safari or chrome dosen’t show (go figure.)

can anyone take a look at my syntax and let me know if i’m doing something wrong?

<style type="text/css" media="screen">
  #nav {
  	background: #1f2121;	
  	text-align: center;
  }
  #nav ul {
  	padding: 0;
  	margin: 0;
  	list-style: none;
  	display: block;
  }
  #nav li {
  	margin: 0;
  	padding: 0;
  	float: left;	
  	display: block;
  	position: relative;
  }
  #nav a {	
  	display: block;
  	float: none;
  	margin: 0;
  	color: #fff;
  	text-decoration: none;
  	border: none;
  	letter-spacing: 0;
  	text-transform: none;
  }
  
  /* root */
  #nav ul.root {
  	margin: 0 auto;
  	width: 960px;
    border-left: 1px solid #363C46;
  }
  #nav a.root {
    padding: 8px 20px;
    border-right: 1px solid #363C46;
    font-size: 1.1em;
  }
  #nav a.root.active {
    color: #3b4853; 
    padding: 8px 20px;
    background: #fff; 
    font-weight: bold;
  }
  #nav a.root:hover {
    background: #363C46;
    color: #fff;
  }
  #nav a.root.path.active {
    background: #1f2121;
    color: #fff;
  }
  
</style>

<div id="nav">
	<ul class="root">
		
			
				<li class="root">
  					<a href="#" class="root active">Home</a>
				</li>
				<li class="root">
				<a href="about.html" class="root">About CEC</a>	
                </li>
				<li class="root">
				<a href="programs.html" class="root">Programs</a>
                </li>
				<li class="root">
				<a href="resources.html" class="root">Resources</a>	
				</li>
                <li class="root">
				<a href="financialaid.html" class="root">Financial Aid</a>
                </li>
                <li class="root">
				<a href="contact.html" class="root">Contact CEC</a>
                </li>		
                </ul>
</div>
2

This works in both IE and Firefox. I had to change both your CSS and your HTML.


  #nav {
    background-color: #1f2121;  
    text-align: center;
    height:50px;
  }
  #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
  }
  #nav li {
    margin: 0;
    padding: 5;
    float: left;  
  }
  #nav a {  
    display: block; 
    float: none;
    margin: 0;
    color: #fff;
    text-decoration: none;
  }
  /* root */
  #nav ul.root {
    margin: 0 auto;
    width: 960px;
    border-left: 1px solid #363C46;
  }
  #nav a {
    padding: 8px 20px;
    border-right: 1px solid #363C46;
    font-size: 1.1em;
  }
  #nav a.active {
    color: #3b4853; 
    background-color: #fff; 
    font-weight: bold;
  }
  #nav a:hover {
    background-color: #363C46;
    color: #fff;
  }

[HIGHLIGHT=“”]
<div id=“nav”>
<ul class=“root”>
<li><a href=“#” class=“active”>Home</a></li>
<li><a href=“about.html”>About CEC</a></li>
<li><a href=“programs.html”>Programs</a></li>
<li><a href=“resources.html”>Resources</a></li>
<li><a href=“financialaid.html”>Financial Aid</a></li>
<li><a href=“contact.html”>Contact CEC</a></li>
</ul>
</div>

3

Hi dmoten3, Welcome to SitePoint :slight_smile:

In regards to your thread title I was not seeing any staricase effect in IE with the code you posted above. Could not see the 1/4" difference you mentioned either.

The normal fix for the staircase bug is to float both the LI and the anchor. You can also set the LI as display:inline; The LI just needs it’s default display of list-item reset when floating the anchor.

However I would suggest eliminating all the .root classes you are using on the LI and anchors as Allan has done above. I would not set a fixed height on the parent div though, the UL just needs overflow:hidden added to it’s ruleset so it will contain the floats. Additionally I would not name my highlighted link as “active”. That is the name of an actual pseudo-class which has nothing to do with link highlighting. It can cause confusion when you actually need or want to use it. Normally I name my highlighted links as “current” to avoid any confusion.

All the parent div is doing is extending the BG color on each side of your centered UL. Not sure what the rest of your page looks like but you could possibly do away with it too. I left it in there for now but I always try to eliminate any wrapping divs around my UL.

See if this helps in some way.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav Test</title>

<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.3 arial,helvetica,sans-serif;
}
#navwrap {
width:100%;
min-width:960px;/*stop bg-color from scrolling left with narrow viewport*/
background:#1f2121;
}
#nav {
width:960px;
margin:0 auto;
padding:0;
list-style:none;
overflow:hidden;/*contain floats (not for use with dropdown subnav)*/
/*background:#000; to show 960px centered*/
}
#nav li, #nav a {
float:left; 
}
#nav a {
padding:8px 20px;
border-right:1px solid #363C46;
background:#1f2121;
color:#fff;
font-size:1.1em; 
text-decoration:none;
}
#nav a:hover {
background:#363C46;
color:#CDF;
}
#nav li:first-child a { /*use a class for IE6*/
border-left:1px solid #363C46;/*Moved from UL to keep width at 960px*/
}
#nav li.current a {
background:#fff;
color:#3b4853;
font-weight:bold;
}
#nav li.current a:hover { /*override #nav a:hover*/
background:#fff;
color:#3b4853;
}
</style>

</head>
<body>

<div id="navwrap">
    <ul id="nav">
        <li class="current"><a href="#">Home</a></li>
        <li><a href="about.html">About CEC</a></li>
        <li><a href="programs.html">Programs</a></li>
        <li><a href="resources.html">Resources</a></li>
        <li><a href="financialaid.html">Financial Aid</a></li>
        <li><a href="contact.html">Contact CEC</a></li>
    </ul>
</div>

</body>
</html>