CSS horizontal menu problem

[metatron]

I've got a problem with a menu in css. It shows differently in IE6 and Firefox2 but I can't figure out why. Anyone?

http://img91.imageshack.us/img91/8661/iefirefoxso9.jpg (http://imageshack.us)



@charset "utf-8";
/* CSS Document */
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
HTML {
OVERFLOW-X: auto; HEIGHT: 100%
}
body{
background:url(images/bg.jpg) #a8a8a8 no-repeat 50% 0%;
LINE-HEIGHT: 1.6em;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#333333;
}
/* layout */
#wrapper {
width:970px;
margin:0 auto;
text-align:left;
}
#header{
width:970px;
height:164px;
background:url(images/header.jpg) no-repeat;
}
#menu{
height:45px;
background:#FFF url(images/menu_bg.gif) repeat-x;
line-height:2em;
font-size:0.7em;
text-align:center;
}
#container{
width:970px;
text-align:center;
height:500px;
}

#footer{
width:970px;
height:100px;
background:#A8A8A8 url(images/footer_bg.gif) repeat-x;
}
#menu ul{
width:970px;
margin:0;
list-style:none;
}

#menu li{
float:left;
}

#menu li a{
display:block;
padding:1em 0.8em 1em 0.8em;
text-decoration:none;
font-weight:bold;
color:#333333;
}
#menu ul .first a{
background:none;
}
#menu ul a:hover{
background:url(images/menu_bg_hover.gif) repeat-x;
}

[metatron]

I fixed it adding a float:right to the UL

#menu ul{
width:850px;
margin:0px;
list-style:none;
list-style-type:none;
float:right;
}

BUT I DON'T GET HOW THAT WORKED. That made Firefox erase that initial "gap" before the list.

Anyone?