Vertical Align [SOLVED - HURRAH!!]
Posted: Sun Aug 06, 2006 3:27 am
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?
In IE:

In FF & Opera

Here's the CSS:
And here's the HTML
Seems like what I did should work. I set the vertical-align for navDiv to middle.
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?
In IE:

In FF & Opera

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;
}
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>