[RESOLVED] Browser Compatibility Issues (oh the norm!)

[cinematic_jesi]

Okay I'm building a css shell for a client and I'm running into one specific issue.

The browsers I'm testing in is the latest IE 7, Firefox 3.1(?), Google Chrome and Safari.

My navigation bar looks great in Firefox and Chrome but in IE and Safari are not being nice what-so-ever. I'm sure because of this, earlier versions of Ie (possibly firefox as well) are having issues, so maybe someone could help me fix the code.

Here's the test link: http://www.hallguerriericox.com.php5-10.websitetestlink.com/

Here's my CSS

.navigation{
padding: 0;
overflow: hidden;
background: transparent;
width: 100%;
}

.navigation ul{
font: bold 11px Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}

.navigation li{
display: inline;
margin: 0px;
padding: 0;
}


.navigation a, .navigation .right, .navigation .left{
float: left;
background: #F3E8D4 url(../main_images/navigation/roundleft.gif) no-repeat left bottom;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
color: #000000;
font-family: times new roman;
display: block;
height: 45px;
font-size: 13px;
}


.navigation a span, .navigation .right span, .navigation .left span{
float: left;
display: block;
background: transparent url(../main_images/navigation/roundright.gif) no-repeat right bottom;
padding: 15px 9px 3px 6px;
cursor: pointer;
height: 30px;
}

.navigation a span{
float: none;
}

.navigation .left {
background: #F3E8D4;
background-image: none;
}

.navigation .left span, .navigation .right span {
width: 24px;
}

.navigation .right span {
background: transparent;
background-image: none;
}
.navigation a:hover, .navigation a.selected {
color: #666666;
}


Thanks in advance!!

[cinematic_jesi]

Also I did a browser test and in anything older then IE 7 [6,5] they don't show up inline either.. ='[.. how can i fix that... ='[

[cinematic_jesi]

nevermind, i just did something else and fixerd it.