CSS Menu Issue

[ziycon]

Below is the code I've created for my menu, it works fine in FF but in IE7 the menu links are moving like in a step formation, I've attached an image of what it looks like in FF and IE7.

<div id="menu_container">
  <ul class="main_menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="#">News</a></li>
  </ul>
</div>

/**** Menu ****/
div#menu_container {
	float: left;
	width: 100%;
	height: 25px;
	background-color: #00A7E1;
	margin: 5px 0px 0px 0px;
	clear: left;
	display: inline;
}
ul.main_menu {
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
	list-style: none;
	clear: left;
}
.main_menu li a {
	float: left;
	width: 90px;
	padding: 4px 10px 7px 10px;
	border-right: 1px #CCCCCC solid;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	display: block;
}
.main_menu li a:hover {
	float: left;
	width: 90px;
	height: 14px;
	padding: 4px 10px 7px 10px;
	color: #00A7E1;
	background-color: #FFFFFF;
	display: block;
}

[ziycon]

Can anyone point me the right direction, I've tried everything and can't figure it out?

[Dormilich]

without looking deeper into the code, i’d guess it’s the Microsoft Box Model that’s causing it.

[zorgi]

if you remove change this

.main_menu li a {

INTO

.main_menu li {

and than style your <a>

[ziycon]

Fixed it. After all the investigating and changing code, moving stuff around etc. The below piece of CSS fixed it in IE.

ul.main_menu li {
	display: inline;
}