1

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/

Improve this question

3 Answers 3

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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 :/
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!
1

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; }
Improve this answer

Comments

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.

Improve this answer

Comments