CODEWITHSUNDEEP
cssmenunavigation
Cynthia
Cynthia

Reputation: 5403

How to get rid of the spaces between CSS nav element borders?

I have a CSS horizontal nav bar and I am using border-left and border-right to create the two-toned dividers between each menu item. For some reason, though, there is a space between the borders and I don't know how to get rid of it.

Here it is: http://jsfiddle.net/ebZhW/1/

Here is my CSS: 

* {
    margin:0 ;
    padding:0 ;
}

body {
    background:#ffffff ;
    padding:40px 0 ;
    font-family:arial,helvetica,sans-serif ;
    color:#131313 ;
}


#topnav {
    width:100% ;
    height:36px ;
    -webkit-border-radius:8px 8px 0 0 ;
    -moz-border-radius:8px 8px 0 0 ;
    border-radius:8px 8px 0 0 ;
    background: #A50000;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#A50000), to(#a10000));
    background: -webkit-linear-gradient(#A50000, #a10000);
    background: -moz-linear-gradient(#A50000, #a10000);
    background: -ms-linear-gradient(#A50000, #a10000);
    background: -o-linear-gradient(#A50000, #a10000);
    background: linear-gradient(#A50000, #a10000);
    -pie-background: linear-gradient(#A50000, #a10000);
    behavior: url(/pie/PIE.htc);
    position:relative ;
    top:87px ;
    z-index:50 ;
    }

    ul.menu {
    margin-left:0 ;
    padding-left:0 ;
    list-style-type:none ;
    }

    .menu li {
    display:inline ;
    color:#ffffff ;
    border-left:1px solid #5d0000 ;
    border-right: 1px solid #d31a1a ;
    padding:0 16px ;
    margin:0 !important ;
    }

    .menu li a {
    font-size:16px ;
    color:#ffffff ;
    text-decoration:none ;
    line-height:36px ;
    }

    .menu li:first-child {
    border-left:0px !important ;
    }

    .menu li:last-child {
    border-right:0px !important ;
}

and my menu code:

    <div id="topnav">
    <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">News / Press</a></li>
    <li><a href="#">Photo Gallery</a></li>
    </ul>
    </div>

Any help is appreciated!

Upvotes: 0

Views: 2496

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191729

The white-space between the elements is being rendered because of the way you are display:ing the elements. There are several solutions including removing the white-space from the DOM. You can also add these rules:

.menu {
    font-size: 0;
}
.menu li {
    font-size: /* whatever this is supposed to be */;
}

...which will prevent any white-space from showing up inside of the <ul>

http://jsfiddle.net/ExplosionPIlls/ebZhW/4/

You could instead add float: left to the li elements. This will make them float with respect to the white-space, so it will not appear. It also makes the border extend the entire way vertically, which may be more desirable.

http://jsfiddle.net/ExplosionPIlls/ebZhW/5/

Upvotes: 0

George Reith
George Reith

Reputation: 13476

The spaces appear because you set each li to display inline. This causes whitespace between the tags to render (From your carriage returns).

Remove the whitespace like so:

    <div id="topnav">
    <ul class="menu">
    <li><a href="#">Home</a></li><li><a href="#">Events</a></li><li><a href="#">News / Press</a></li><li><a href="#">Photo Gallery</a></li>
    </ul>
    </div>

http://jsfiddle.net/ebZhW/2/

Alternatively you can float the list-items to have them appear on the same line without forcing them to be treated as an inline element:

http://jsfiddle.net/ebZhW/3/

Upvotes: 2

Related Questions