Horisontell meny i IE

Hej, jag och min kompis sitter och försöker att lösa ett stort problem vi har med IE serien. Vi vill ha en horisontell meny med enbart text och en seperator imellan menyn:

STARTSIDA I STARTSIDA I STARSIDA

så vill vi att det ska se ut, det funkar bra i alla webbläsare förutom i versionerna IE7, IE6 och IE5. Nu ligger menyn i en lista som har display:inline-block som kod. menyn ligger även i div som heter meny. Koden ser ni nedan:

#menu {
margin:0 auto;
width:750px;
height:15px;
}

#menu a {
font-size:1.1em;
text-shadow: 0px 2px 0px #FFF;
font-family:Georgia, "Times New Roman", Times, serif;
color:#333;
text-decoration:none;
}

#menu ul {
list-style:none;
}

#menu li {
background-image:url(../grafik/seperator.png);
background-repeat:no-repeat;
background-position:right;
display:inline-block;
width:100px;
margin-left:15px;

Det som händer är att texten eller länkarna i menyn inte lägger sig bredvid varandra som det dock gör i alla andra webbläsare. Hur kan man lösa detta?

Tack för tipset. Det gick dessvärre inte att bara ändra till "inline" istället för "inline-block".

Jag förstod inte varför det inte fungerade, jag läste på sidan du länkade och det borde funkat. Men nu har vi löst det för IE7 i alla fall. Koden för den webbläsaren ser ut såhär nu:

#menu {
margin:0 auto;
width:660px;
height:15px;
}

#menu a {
font-size:1.1em;
text-shadow: 0px 2px 0px #FFF;
font-family:Georgia, "Times New Roman", Times, serif;
color:#333;
text-decoration:none;
}

#menu ul {
list-style:none;
}

#menu li {
background-image:url(../grafik/seperator.png);
background-repeat:no-repeat;
background-position:right;
display:inline-block;
zoom:1;
*display:inline;
width:100px;
margin-left:15px;

Vi hittade någon hack som, med hjälp av "zoom" och "*display:inline" gjorde så att den la sig som en horisontell linje. Konstigt nog fungerade det.