Vertical Align issue in IE7

[bjdmb]

I have been able to vertically align: middle multiple lines of text (navigation) and it works in FF. This does not work in IE7. I have seen multiple ways to align right in IE7 but I have not found one that worked for me. Any suggestions?

[Besherek]

show us your code

[bjdmb]

show us your code

HTML Code

<div class="leftnav">			
<img src="http://www.youngmediainc.com/vegastelecom/slices/nav-top.jpg" border="0">
				<ul> 
				  <li class="navlinks"><a href="index.php">Home</a></li> 
				  <li class="navlinks"><a href="clear.php">Clear</a></li>
				  <li class="navlinks"><a href="products.php">Business Phones</a></li> 
				  <li class="navlinks"><a href="business-phone-systems.php" >Phone Systems</a></li>
				  <li class="navlinks"><a href="business-voice-mail.php" >Voicemail</a></li>
				  <li class="navlinks"><a href="services.php" >Services</a></li> 
				  <li class="navlinks"><a href="feedback.php" >Feedback</a></li> 
				  <li class="navlinks"><a href="contact.php" >Contact</a></li> 
				</ul> 
			
			<div class="graybar">&nbsp;</div>
				<div class="logos">
				<img src="slices/clear-logo.jpg"><br>
				<img src="slices/nortel-logo.jpg"><br>
				<img src="slices/telepacific-logo.jpg"><br>
				</div>
			<div class="clear">&nbsp;</div>
			<div class="graybar">&nbsp;</div>
				<div class="logos">
				<span class="contactus">Contact Us</span><br> 
				<span class="phone"><strong>702-260-4559</strong></span>
				</div>
			<div class="clear">&nbsp;</div>
			<div class="graybar">&nbsp;</div>
		
	  </div>
			<div class="navbottom">&nbsp;</div>

CSS Code

.navlinks{
	background-image:url(../slices/navbutton.png);
	background-repeat:no-repeat;
	height:32px;
	margin-left:-15px;
	}
.navlinks a {	
	font-family:Arial, Helvetica, sans-serif;
	color:#00275c;
	font-size:14px;
	font-weight:bold;
	padding-left:38px;
	vertical-align:middle;
	line-height:10px;
	}
.leftnav{
	background-image: url(../slices/bkg-nav-sides.png);
	background-repeat:repeat-y;
	width:213px;
	padding-top:0px;
	margin:0;
	
}
.leftnav ul li{
	list-style-type:none;
}
.leftnav ul li a{
	text-decoration:none;
	width:213px;
	padding-top:10px;
}
.leftnav ul li a:hover{
	text-decoration:underline;
	}

[ko ko]

The element vertical align is depended on it's height and line-height property. If height and line-height were the same, the content it would be stay vertically middle. Add line-height to your '.navlinks' property:

.navlinks{
background-image:url(../slices/navbutton.png);
background-repeat:no-repeat;
height:32px;
line-height: 32px;
margin-left:-15px;
}

Remove 'vertical-align:middle' from anchor link.

.navlinks a {
font-family:Arial, Helvetica, sans-serif;
color:#00275c;
font-size:14px;
font-weight:bold;
padding-left:38px;
line-height:10px
}

Good luck.