List and css[IE VS FIREFOX]

[k4is3r]

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:

<style>
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}
</style>

<div id="navigation">
<ul>
    <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>
    </ul>
</div>

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

[Paul O'B]

Hi,

Theres a few things you can do.

First you could just give ie the style that it needs.

div#navigation li{margin:0;padding:0}
* html div#navigation {display:inline}/* only ie will get this*/

Or you could try adding a space before the closing anchor which for some strange reason often cures the problem.

<li id="one"><a href="newss.php"><img src="buttons/home_.jpg" alt="home page"> </a></li>

There is one other thing to try and that is closing the whitespace in the html before the closing between the closing list item and the opening list item

</li><li>

One of those should sort your problem with any luck.

Paul

[k4is3r]

Thank you very much man, the first trick work like a charm!
So, may i ask you more: how about any links or tutorials about this problem , or any links about differences about different interpretation of css/html by browsers!?
thank you again

[Paul O'B]

Hi,

You will find some info about browser problems here (but not explicitly about the above problem).

http://www.positioniseverything.net/

http://www.thenoodleincident.com/tut...css/index.html

Paul