Nav bar border issue

Question

I am working on a new home page, trying to avoid images as much as possible and I have a slight issue with the borders on the Nav bar. I can't really think of a way to get the sides of the borders to link into each other with padding. At the moment the sides are not touching so it doesn't look continuos. I may be missing something obvious but I can't think of a way to meet them up. Any one have any ideas?

The only way I can think to solve this is with classes on each of the li elements but am wondering if there is an optional way.

Here is a Fiddle for you to check :

http://jsfiddle.net/WZF4M/

score 1 · Answer 1 · answered Sep 14 '12 at 16:36

Try this jsFiddle example. I floated the list items left instead of displaying them inline. That removes the gaps between them. Then I positioned the list itself relatively and move it up slightly.

CSS:

ul{
    float: right;
    position:relative;
    top:-14px;
}
li{
    float:left;
    padding: 11px 12px 11px 12px;
    border: solid 1px #c1c1c1;
}

score 1 · Accepted Answer · edited May 23 '17 at 10:29

1

You may want to use the following in li styling? A tweak though; not tested in all browsers.

li{
    display: inline;
    margin-right: -5px; /*Add this*/
    padding: 11px 12px 11px 12px;
    border: solid 1px #c1c1c1;
}

Option 2:-

A more elegant solution right here at SO.

How do I remove extra margin space generated by inline blocks?

You may have to make changes to your html for this.

<ul>
    <li>Test</li><li>Apple</li><li>Cat</li><li>Dog</li>
</ul>

edited May 23 '17 at 10:29

Community

1
1

answered Sep 14 '12 at 16:39

ram

747
2
11
34

This would be the accepted answer if I could get it to work in Firefox. It's tabbing down to the next line for some reason :/ – Sep 14 '12 at 17:03
Yep that did the trick. Firefox is still being a bit of a pain with the bottom border overlapping by 1px compared to other browsers but the whitespace issue sure is strange! – Sep 14 '12 at 17:33

score 0 · Answer 3 · answered Sep 14 '12 at 16:37

0

What you can do to give this a more continuous feel is to only use border-right on your li elements in your menu.

http://jsfiddle.net/WZF4M/3/

I have updated your fiddle.

Let me know if this is what you were looking for.

answered Sep 14 '12 at 16:37

Jared

12,406
1
35
39

Nav bar border issue

3 Answers3