Horizontal Menu Problem

I am a newbie and and I recently setup my first drupal site. I want it to have a horizontal main menu. In order to do so I added some CSS in my themes' style.css file to create a horizontal menu.

Unfortunately, the menu only displays well in Windows Explorer
(versions earlier than version 7), and Konquerer and it looks jagged in Mozilla Firefox and Internet explorer 7 and later.

You can view the site here
http://www.quantum.com.na/jcc

The style.css portion for the menu:

#menu {
padding: 0.0em 0.0em 0 0.0em;
text-align: 3;
vertical-align: middle;
horizontal-align: middle;
}

#menu ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

#menu table{
width: 100%;
height:20px;
}

#menu a
{
float:left;
/*min-width:5em;*/
text-decoration:none;
color:white;
/*background-color:purple;*/
background-image:url("/files/button.gif");
/*background-position:lef;*/

padding:0.2em 0.6em;
border-right:1px solid white;
border-top:2px solid white;
}

#menu a:link
{
text-decoration:none;
color:white;
/*background-color:purple;*/
background-image:url("/files/button.gif");
}
#menu a:hover {
background-image:url("/files/button_over.gif");
color:black;
}

#menu a.active {
background-image:url("files/button_over.gif");
color:black;
}

#menu li {
display:inline;
}

#menu li a.active {
background-image:url("/files/button_over.gif");
}

What can I do to fix the menu?