CSS horizontal menu problem

programming web dev
1

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?


@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;
 }