Vertical Align [SOLVED - HURRAH!!]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Vertical Align [SOLVED - HURRAH!!]

Post by s.dot »

Hey guys,

I'm having some issues with my navigation. Works like I want in IE, but not in FF or Opera. I want to have the text vertically aligned in the center. Sounds simple right? :P

In IE:
Image

In FF & Opera
Image

Here's the CSS:

Code: Select all

.navDiv {
	
	/* Size Properties */
	width: 100%;
	height: 25px;
	
	/* Background Properties */
	background-color: #3399CC;
	
	/* Border Properties */
	border-bottom: solid 1px #333;
	
	/* Text Properties */
	vertical-align: middle;
	
}

.navDiv a:active, .navDiv a:visited, .navDiv a:link {
	
	/* Text Properties */
	font-family: verdana, arial, tahoma;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	text-transform: uppercase;
	
}

.navDiv a:hover {
	
	/* Text Properties */
	font-family: verdana, arial, tahoma;
	font-size: 11px;
	font-weight: bold;
	color: #3399CC;
	text-decoration: none;
	text-transform: uppercase;
	
}

.navButton {
	
	/* Size Properties */
	height: 25px;
	width: 14.28%;
	
	/* Float */
	float: left;
	
	/* Text Align */
	text-align: center;
	
	/* Border Properties */
	border: none;
	
	/* Background Image */
	background-image: url('../images/black_dot.gif');
	background-position: top right;
	background-repeat: repeat-y;
	
}
And here's the HTML

Code: Select all

<div class="navDiv">
	<div class="navButton"><a href="index.php">Home</a></div>
	<div class="navButton"><a href="#">How It Works</a></div>
	<div class="navButton"><a href="#">Tips</a></div>
	<div class="navButton"><a href="#">Sites</a></div>
	<div class="navButton"><a href="#">Proof</a></div>
	<div class="navButton"><a href="#">FAQ</a></div>
	<div class="navButton"><a href="forum">Forums</a></div>
</div>
Seems like what I did should work. I set the vertical-align for navDiv to middle.
Last edited by s.dot on Sun Aug 06, 2006 5:38 am, edited 1 time in total.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Use padding instead, and set the height to auto, vertical-align only aligns objects in the line they are on, not vertically in the parent element.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Another 'trick' is to use line-height. So you set line-height the same as the height. Like:

Code: Select all

.nav a {
  font-size:12px;
  line-height:26px;
  height:26px;
  margin:0;
  padding:0;
}
One thing you need to remember though is that if text inside one of the nav elements is longer and wraps on new lines, it can get messy.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Very nice, you guys are like... geniuses. Aha.

CSS is not my thing, but i'm learning slowly. :-D
Thanks a lot!
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I realize this is a really old thread, but I was wondering what astions means about "use padding instead" I have this same problem but the stuff I need vertically aligned in the middle spans several lines (or possibly only one). I have no way of knowing ahead of time. How should I go about aligning it? :(
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

nevermind "margin: auto" worked
Post Reply