Problem with navigation float in IE7

[benjaminmorgan]

IE 7 is such a problem causer. I can not get the navigation menu to float right. It looks staggered like a diagonal. Here is my code. Help is appreciated. It should float left. the class navul is 500px and that divided by 4 = 125 px for each link

 

 

HTML

				<ul class="navul">
				<li><a class="current" href="index.html">Home</a></li>
				<li ><a href="services.html">Services</a></li>
				<li ><a href="portfolio.html">Portfolio</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>

 

CSS

.navul a {
display: inline-block;
width: 125px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
color: black;
border-radius: 0 0 5px 5px;
behavior: url(pie.htc);
font-weight: bold;
text-decoration: none;
}

.navul a.current {
background: black;
color: white;
}

[Wickham]

I've seen this stagger in IE before. It's usually because the li tag needs a float: left, not the "a" tag inside it. Try adding

.navul li {
float: left;
}

[benjaminmorgan]

wow, can't believe i forgot something so simple. I normally always style the li first. Thanks!