IE Not Calc. % Properly?

[liunx]

I have a menu bar I created for a new site. It's a list of 4 items with each <li> width set to 20%. It looks great in everything but IE with a screen resolution of 1024x768 (and lower I think) maximized. If you have a higher resolution or not maximized it looks fine! This is a very odd bug. Take a look at the template: <!-- m --><a class="postlink" href="http://beta.bikeblast.com/_assets/template/design.tpl.html">http://beta.bikeblast.com/_assets/templ ... n.tpl.html</a><!-- m --> Idea??

Code:

<!-- Main Navigation HTML -->
<div id="Main_Nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/">Homepage</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/events/">Events</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/trails/">Trails</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/member/">Member</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/forum/">Forum</a></li>
</ul>
</div>

/********** Main Navigation CSS **********/
#Main_Nav {
background: #FFCC00 url(/_assets/images/bg_MainNav.jpg) repeat-x;
float: left;
margin: 0px;
padding: 0px;
}
#Main_Nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 100%;
}
#Main_Nav li {
float: left;
margin: 0px;
padding: 0px;
text-align: center;
white-space: nowrap;
width: 20%;
}
#Main_Nav a {
border-left: 1px solid #EABC00;
border-right: 1px solid #FFEB99;
color: #003399;
display: block;
font-weight: bold;
padding: 2px;
position: relative;
text-decoration: none;
}
#Main_Nav a:hover {
background-color: #FFCC00;
color: #CC0000;
}Seemed fine in my IE with 1152x864. Even resized, looked fine. But, you may need to change: "#Main_Nav li" to "#Main_Nav ul li"