Liste che cambino immagini al click, con IE và ma con FF no

[flash.tato]

Ho una lista di questo tipo:

         <div id="navbar">
            <ul>
            [*][url="index.php"][/url]
            [*][url="software.php"][/url]
            [*][url="beta.php"][/url]
            [/list]
         </div> 

Il CSS principale:

#header {
 background-image: url(header.png);
 height: 140px;
}

#navbar {
 background-image: url(top_header.png);
 height: 30px;
 text-align: left;
}

#navbar ul {
 margin: 0;
 padding: 0;
 line-height: 30px;
}

#navbar li {
 list-style-type: none;
 display: inline;
 height: 30px;
 width: 110px;
}

#navbar li a, #navbar li a:hover {
 text-decoration: none;
} 

Il CSS dei tag[*] con le immagini è questo

.button_home {
 background-image: url(buttons/home.png);
}

.button_home:hover {
 background-image: url(buttons/home_hover.png);
}

.button_software {
 background-image: url(buttons/software.png);
}

.button_software:hover {
 background-image: url(buttons/software_hover.png);
}

.button_beta {
 background-image: url(buttons/beta.png);
}

.button_beta:hover {
 background-image: url(buttons/beta_hover.png);
} 

Con IE è tutto OK ma con FireFox manco mostra le immagini.

Che cosa sbaglio?