Question

I create CSS menus day in, day out and I’ve never come across this problem before and its really baffling me! :S

I’ve tried everything I can think of with no luck. In Chrome it works fine, but in Firefox the last link steps onto a new line, in IE the last 2 links steps onto a new line.

If I remove the padding all the links stay on the same line.

Take a look at what I mean here… http://dlclients.com/estates/ but here’s a summary of the CSS and HTML thats causing the issue.

nav{
    background: url(images/background_nav.png) repeat-x;
    height: 30px;
    position: absolute;
    left: 0;
    width: 100%;
    margin-top: 20px;
 }

 #nav-inner{width: 1000px; height: 30px;}

 #nav-inner ul{list-style: none; margin: 0; padding: 0; width: 1070px;}
 #nav-inner ul li{
     display: inline;
     overflow: auto;
 }
 #nav-inner ul li a{
     display: block;
     color: white;
     text-decoration: none;
     font-size: 12px;
     float: left;
     height: 30px;
     line-height: 30px;
     border-right: 1px solid #6D6E71;
     padding: 0 14px;
 }
 #nav-inner ul li a.last{border: none;}
 #nav-inner ul li a:hover{
     border-bottom: 4px solid white;
 }

THE HTML:

<nav>
                <div id="nav-inner">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Buy</a></li>
                        <li><a href="#">Sell</a></li>
                        <li><a href="#">Rent</a></li>
                        <li><a href="#">Landlords</a></li>
                        <li><a href="#">Property Maintenance</a></li>
                        <li><a href="#">Commercial/Land</a></li>
                        <li><a href="#">Short Term Let/Olympics</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#" class="last">Contact Us</a></li>
                    </ul>
                </div> 
            </nav>

Hope you can help resolve this because I’ve spent over 2 hours trying to figure this out?!?

Answer 1

ul and li have pre-set values for padding and margin, as defined by the browser, unless explicitly set in the CSS. Try adding the following above your first line of CSS and style the remaining classes accordingly:

ul, li {margin:0; padding:0;}