CSS rollover

[liunx]

My site (<!-- m --><a class="postlink" href="http://strategyplanet.com/populous/">http://strategyplanet.com/populous/</a><!-- m -->) uses a css rollover for the menu that works nicely in IE and Opera, but ignores the sizes for the image in gecko browsers.


CSS:
#menu ul {
margin: 0;
padding: 0;
width:100px;
list-style-type: none;
font-size: .9em;
}
#menu li {
margin-left: 5px;
height:36px;
width:100px;
}
#menu a, #menu a:hover {
height:36px;
width:100px;
font-size:40px/1;
font-family:MasonAlternate, Regular, Georgia, garamond, arial;
font-weight:800;
text-decoration:none;
margin-bottom:5px;
margin-left:10px;
color:#DDD;
}
#menu a{
padding-top:5px;
padding-bottom:5px;
background: url("images/button.gif") top left no-repeat;
}
#menu a:hover {
background-position: 0 -36px;
padding-top:7px;
padding-bottom:3px;
padding-left:2px;
}

HTML:
<div id="menu">
<ul>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/menu/news.gif" alt="News:" /></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.asp">Recent</a></li>
...#menu a{
padding-top:5px;
padding-bottom:5px;
background: url("images/button.gif") top left no-repeat;
display: block;
}ah perfect, thank you!You're welcome.