När det gäller det konstiga mellanrummet så är det denna du bör lägga till i din css-fil
*{margin:0;padding:0;}
Det besvärliga med IE är att man bara kan använda hover på länkar. Det skulle ha fungerat för dig med den kod du har däruppe, men då skulle bara själva texten fått din bakgrundsbild. I stället för att rätta den, har många fel, så antar jag att du vill ha bakgrundsbilden över hela "li" och då måste man starta lite annorlunda. Ett sätt är detta som jag brukar använda...
Först html-koden
<div id="menu">
<ul id="menulist">
<li><a href="#"><em>Start</em></a></li>
<li><a href="#"><em>Admin</em></a></li>
<li><a href="#"><em>Portfolio</em></a></li></ul></div>
id i stället för class på menulist och em på texten.
#menu{
margin: 0.2em;
}
#menulist{
background: url(image/menu_inactive.gif);
color:#fff;
height:auto;
list-style-type:none;
margin:0 auto;
padding:0;
width:100%;
float: left;
}
#menulist a{
display:block;
height:3.0em;
position:relative;
text-decoration:none;
width:6.3em;
float: left;
background: url(image/menu_inactive.gif);
outline:0px solid #fff;
}
#menulist a em{
color:#333;
cursor:pointer;
display:block;
font: 1.2em Georgia, "Times New Roman", Times, serif;
height:3.0em;
left:0.8em;
position:absolute;
top:0.6em;
width:4.3em;
}
#menulist a:hover{
background: url(image/menu_active.gif);
text-decoration: underline;
color: #000;
}
#menulist li{
display:block;
float:left;
height:3.0em;
margin-right:0.2em;
width:8.0em;
background-color: transparent;
}
omdu vill slippa punktena runt länken i IE när man klickar på den så lägger du till den här:
#menulist a:active,#menulist a:focus{
height:0;
outline:0;
width:0;
}
Tips: gör det när du är klar. Ibland är det en god hjälp för att se var länken finns någonstans, om den sträcker sig utanför menyn t.ex.
Värdena på bredd och höjd och sådant får du ändra själv. Mina är bara ungefärliga och inte med px... :)