# CSS horizontal menu problem

**URL:** https://forum.kirupa.com/t/css-horizontal-menu-problem/249943
**Category:** web dev
**Created:** [January 23, 2008, 10:21pm UTC](https://forum.kirupa.com/t/css-horizontal-menu-problem/249943 "2008-01-23T22:21:40Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![metatron](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@metatron](https://forum.kirupa.com/u/metatron)
#### Post date: [January 23, 2008, 10:21pm UTC](https://forum.kirupa.com/t/css-horizontal-menu-problem/249943/1 "2008-01-23T22:21:40Z")

</div>

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)

```auto

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

```