Extending vertical border to another border

olivaw · March 15th, 2010, 02:35 PM

I want the vertical borders within my navigation bar to extend all the way to the top and bottom of the bar. But the code I'm using means the vertical borders (#main_nav ul li a in the code below) only extend about 75% of the distance.

Here's the CSS:

Code:

#main_nav {
	border:1px solid black;
	padding:2em 25px;
	margin:0 auto 2em auto;
	width:60%;
	max-width:800px;
	}

#main_nav ul {
	margin:0;
	padding:0;
	}
	
#main_nav ul li {
	display:inline;
	list-style-type:none;
	margin:0 0 0 -4px;
	padding:0;
	}

#main_nav ul li a {
	padding:1em 2em;
	color:#333333;
	text-decoration:none;
	border-right:1px solid black;
	}

And the HTML:

Code:

<!-- #main_nav -->
<div id="main_nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>

How do I extend the vertical borders so they're touching both the top and bottom of the navigation bar's border?

Thanks.

PeterPeiGuo · March 15th, 2010, 05:50 PM

Change one character (padding 2em 2em instead of 1em 2em), tried with Opera and worked:

Code:

#main_nav ul li a {
	padding:2em 2em;
	color:#333333;
	text-decoration:none;
	border-right:1px solid black;
	}

PeterPeiGuo · March 15th, 2010, 05:53 PM

Tried with IE8, Firefox and Chrome, all worked.

olivaw · March 15th, 2010, 06:46 PM

Quote:

Originally Posted by PeterPeiGuo

Change one character (padding 2em 2em instead of 1em 2em), tried with Opera and worked:

Code:

#main_nav ul li a {
	padding:2em 2em;
	color:#333333;
	text-decoration:none;
	border-right:1px solid black;
	}

Yes you're right but there is a very slight gap between the bottom border and the vertical border.

It's not all that noticeable but if I add in:

Code:

#main_nav ul li a:hover {
	background:#0387DC 
	}

it's a lot more noticeable.

Consequently, this isn't really a 100% accurate fix.

PeterPeiGuo · March 15th, 2010, 08:07 PM

I don't see that gap and I believe that's because we use different default font. This brings up a point that, use em as the unit here is not the best - 1em means the same size as the text, and 2em means 2 times bigger etc. - it creates dependency on the font.

Let's specify the height of the div use px, and set the padding to the same. Try the following (I used 200px only to make this visual, you need to adjust):

Code:

#main_nav {
	border:1px solid black;
	padding:2em 25px;
	margin:0 auto 2em auto;
	width:60%;
	max-width:800px;
	height: 200px
	}

#main_nav ul {
	margin:0;
	padding:0;
	}
	
#main_nav ul li {
	display:inline;
	list-style-type:none;
	margin:0 0 0 -4px;
	padding:0;
	}

#main_nav ul li a {
	padding:200px 2em;
	color:#333333;
	text-decoration:none;
	border-right:1px solid black;
	}

#main_nav ul li a:hover {
	background:#0387DC 
	}

olivaw · March 16th, 2010, 05:57 AM

Ah right that has helped.

However, I'm being a bit fastidious here but the vertical border now extends beyond the bottom border by around 1px.

This is my code:

Code:

#main_nav {
	border:1px solid black;
	padding:1em 25px;
	margin:0 auto 2em auto;
	width:60%;
	max-width:800px;
	height:17px;
	}

#main_nav ul {
	margin:0;
	padding:0;
	}
	
#main_nav ul li {
	display:inline;
	list-style-type:none;
	margin:0 0 0 -4px;
	padding:0;
	}

#main_nav ul li a {
	padding:17px 2em;
	color:#333333;
	text-decoration:none;
	border-right:1px solid black;
	}

The font I'm using is Arial. I tried 16px instead of 17 but the border still extends beyond the bottom border. Any thoughts?