Hey everyone,

Im new to the network and I already require help, lol

I am working on a new portfolio design for my website but unfortunately Im having an issue occur, of which I can seem to resolve, ive tried resetting elements, ive tried redoing the css file from scratch, but all roads seem to lead to Internut Exploder breaking my design...

I have a navigation menu... it is absolutly positioned (to gain vertical alignment), has 100% width (I wish the menus to span the entire width of the page), and each item is floated (to maintain block) with a set width of 20% - as there are 5 list items... 20% * 5 = 100% (width).

Now under every other browser, the math is working... IE8 even shows it working fine (must have been fixed post IE7), but IE7 and lower causes the design to push the last element to the next row, breaking the design.

Below is the HTML:

HTML Code:
<body>
<ul id="nav">
	<li><a href="#" title="About">About</a></li>
	<li><a href="#" title="Work">Work</a></li>
	<li><a href="#" title="Learn">Learn</a></li>
	<li><a href="#" title="Login">Login</a></li>
	<li><a href="#" title="Contact">Contact</a></li>
</ul>
</body>
Below is the CSS:

Code CSS:
@media screen {
* {
	border: 0;
	margin: 0;
	padding: 0;
}
#nav {
	margin-top: -65px;
	padding: 10px 0 10px 0;
	position: absolute;
	top: 50%;
	width: 100%;
}
#nav li {
	display: inline;
}
#nav li a {
	background: #0A2E2C;
	color: #AFAFAF;
	display: block;
	float: left;
	height: 100px;
	line-height: 100px;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	width: 20%;
}
}

any help you can provide would be very helpful as ive been stressing over this bug for the past 3 hours with no end in sight, so i come to you for assistance Thanks a lot.

Alex