[RESOLVED] css/html5 cross-broswer issue (hitting head against the wall)

[Areyne]

I coded my top navbar, which looks beautiful in Chrome, but doesn't look right at all in ff or ie, where the last item removes itself from the bar. If I adjust ANYTHING in the code, it doesn't look right it chrome. Any help or ideas you could give is appreciated.
<nav class="main">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="party.html">Party</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>


body{
margin:0;
padding:0;
background-color:#1391ba;
color:#000;
}

header, nav, section, footer, aside, article{
display:block;

}

.wrapper{
width:960px;
margin:0 auto;
}

header{
height:180px;
background-color:#2bb74e;
}

nav.main{/*....................Top nav bar start.........*/
height:70px;
width:680px;
margin:-35px 0 0 0;
background-color:#f8af17;
border-radius:15px 15px 15px 15px / 15px 15px 15px 15px;
border:1px solid #000;
float:right;

}

nav.main ul{
list-style-type:none;
padding:0;
margin:0;
}

nav.main ul li{
display:block;
float:left;
}

nav.main a:link{
display:block;
padding:0 40px 0 40px;
line-height:70px;
color:#000;
font-size:18px;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
}

nav.main a:hover{
margin: 0 16px 0 16px;
padding:0 24px 0 24px;
background-color:#1391ba;
}

nav.main a:active{
background-color:#1391ba;
}

nav.main a:visited{
color:#dddada;

}/*....................Top nav bar end.........*/

[seniseven]

1. You have specified the height property in the nav element. Have you considered that to be the problem?
2. Consider also playing with the marginproperty to adjust your content for all browsers. This particularly is important for positioning of floated elements.
3. Any reason you used the class attribute for the nav element as opposed to using the id attribute to identify elements in the markup?
4. Try to avoid using fixed distances/length units to style/present markup, such as px or em...where possible, use percentages. This is because font styles/sizes in the default might vary in browsers, and ruin your look. You may actually want to include a font property in the body element to influence the issue: try that first to see how it affects the other browsers not giving you what you want. Browsers can be quirky. But the fact you are testing in all major HTTP clients (browsers) is good.

[Areyne]

4 was it thank you, combined with thinking outside the box a little. (I added blank li's to position as well, go figure.)

I'm a student and this is not my choice website layout. I have to follow certain criteria every week in the design, such as hover this week, and sprites next. I'll convert to percentages. Thanks for your help!

Reyne

[Areyne]

Seniseven,

4 was it. I'll switch the rest to percentages. Thanks for your time.

Reyne