SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Staircase Issue

    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?

    Code CSS:
    <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>


    Code HTML4Strict:
    <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. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This works in both IE and Firefox. I had to change both your CSS and your HTML.

    Code CSS:
      #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;
      }

    Code :
    <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. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi dmoten3, Welcome to SitePoint

    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.

    Code HTML4Strict:
    <!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>


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
  •