Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old March 15th, 2010, 02:35 PM
Registered User
 
Join Date: Mar 2010
Posts: 8
Thanks: 3
Thanked 0 Times in 0 Posts
Default Extending vertical border to another border

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.
Reply With Quote
  #2 (permalink)  
Old March 15th, 2010, 05:50 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

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;
	}
Reply With Quote
  #3 (permalink)  
Old March 15th, 2010, 05:53 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

Tried with IE8, Firefox and Chrome, all worked.
Reply With Quote
  #4 (permalink)  
Old March 15th, 2010, 06:46 PM
Registered User
 
Join Date: Mar 2010
Posts: 8
Thanks: 3
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by PeterPeiGuo View Post
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.
Reply With Quote
  #5 (permalink)  
Old March 15th, 2010, 08:07 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

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 
	}

Last edited by PeterPeiGuo; March 15th, 2010 at 08:18 PM..
Reply With Quote
  #6 (permalink)  
Old March 16th, 2010, 05:57 AM
Registered User
 
Join Date: Mar 2010
Posts: 8
Thanks: 3
Thanked 0 Times in 0 Posts
Default

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?
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How Can I Delete Vertical border in World indra All Other Wrox Books 0 July 17th, 2009 06:56 AM
border to button rupal .NET Framework 2.0 1 November 15th, 2008 08:35 AM
Extend a border nloding CSS Cascading Style Sheets 1 September 1st, 2006 08:43 PM
Border help! Rodney Dreamweaver (all versions) 8 July 20th, 2006 03:34 PM
border around a report stoneman Access 1 June 22nd, 2005 06:14 AM



All times are GMT -4. The time now is 12:16 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.