Hi folks,
my problem is really stupid as boring!
In order to have a roll-over effect on a vertical menu with only image, i have used this code:

HTML Code:
img{border-width: 0}
div#navigation{float: left;padding-top: 20px}
div#navigation ul{list-style-type: none;margin: 3px;padding: 0;}
div#navigation li{display:inline;margin:0;padding:0}
div#navigation li a{display:block;}
div#navigation a:hover{line-height: 1px; /*serve per IE*/}
div#navigation a:hover img{visibility: hidden}
li#one{background: url("buttons/home_over.jpg") no-repeat top left}
li#two{background: url("buttons/news_over.jpg") no-repeat top left}
li#three{background: url("buttons/members_over.jpg") no-repeat top left}
li#four{background: url("buttons/login_over.jpg") no-repeat top left}
li#five{background: url("buttons/contact_over.jpg") no-repeat top left}
li#six{background: url("buttons/gallery_over.jpg") no-repeat top left}
li#seven{background: url("buttons/downloads_over.jpg") no-repeat top left}
li#eight{background: url("buttons/rules_over.jpg") no-repeat top left}
li#nine{background: url("buttons/links_over.jpg") no-repeat top left}

<div id="navigation">
    <li id="one"><a href="newss.php"><img src="buttons/home_.jpg" alt="home page"></a></li>
    <li id="two"><a href="#"><img src="buttons/news_.jpg" alt="news archive"></a></li>
    <li id="three"><a href="memberso.php"><img src="buttons/members_.jpg" alt="members"></a></li>
    <li id="four"><a href="admin/index.php" target="_new"><img src="buttons/login_.jpg" alt="login"></a></li>
    <li id="five"><a href="imgmenu.html"><img src="buttons/contact_.jpg" alt="contact"></a></li>
	<li id="six"><a href="gallery.php"><img src="buttons/gallery_.jpg" alt="gallery"></a></li>
    <li id="seven"><a href="downloads.php"><img src="buttons/downloads_.jpg" alt="downloads"></a></li>
    <li id="eight"><a href="rules.php"><img src="buttons/rules_.jpg" alt="rules"></a></li>
    <li id="nine"><a href="links.php"><img src="buttons/links_.jpg" alt="links"></a></li>
So, it is very simple: when the mouse is over any li elements it hidden the image and shows the background image with this div#navigation a:hover img{visibility: hidden}
In order to solve the stupid bug in IE that show a white space beetween the li elements of a UL list, i used this trick founded on the net div#navigation li{display:inline;margin:0;padding:0}

So it works perfectly under IE but when i try with FireFox,it not shows the background image!
If i cut the "display:inline" from here
div#navigation li{display:inline;margin:0;padding:0} it work on firefox, but the menu is showed with a large white space beetween each list item (each image) on IE6...
How to solve it?!?
There is some solution or i have to sniff the browser type and get the right .css for it!?!?!
Sorry for my bad english,
thank you in advance