Archief - CSS: list-menu

Hi all,
zit met een probleempje. Ik wou een typisch web2.0-tabs-menu'tje in elkaar knutselen, maar dan wel deftig en niet met <img>-tags en js-rollovers.

Dus, ik kwam uiteindelijk met volgende html te zitten:

<div id="menu">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

En de bijhorende CSS:

#menu ul li a {
margin: 0;
}
#menu ul,

#menu ul li {
list-style-type: none;
display: inline;
padding: 0;
margin: 0;
margin-left:3px;
}

#menu {
float: left;
padding: 0;
margin: 0px;
text-align:center;
}

#menu li {
width: 103px;
margin-left:0px;
}

#menu a {
display: inline;
text-decoration: none;
background-image:url("bg_menu.gif");
width:103px;
height:19px;
font-family:helvetica;
font-size:12px;
color:#212121;
font-weight:bold;
margin-top:0px;
}

#menu a:hover {
color: #fff;
background-image:url("bg_menu_hover.gif");
width:103px;
}

Is nogal messy doordat het deels uit een tutorial-script is geknipt, maar zou in theorie moeten werken. Natuurlijk doet het dat niet Toch niet in firefox...

Het concrete probleem: Firefox resizet de grootte van de li tot die van de <a> erin. Hierdoor zie je maar een fractie van de background-image. IE doet dit blijkbaar niet, en geeft het "juist" weer (wat waarschijnlijk "fout" is).

http://mmdb.be/dev/testindex.html

Alle hulp wordt zeer geapprecieerd ;-)

moet je geen background-image steken op je li ?
just a quick guess