problem med meny

Jag får inte till min meny som jag vill ha den, det blir som vanligt problem mellan FF och IE. Det blir antingen bra i FF eller IE beroende på hur jag ändrar koden....irriterande! x(

Jag skulle vilja ha det så att menyn är centrerad med en bredd på varje listelement på 90px, alt. jämnt utspridd över hela div:en.

div#menucontainer{margin: 0px; padding: 0px; height: 26px;  width:704px; background-image: url(../images/menubg3.jpg) ; background-repeat: no-repeat;}

	#menucontainer ul{list-style-type: none; padding: 0em; margin: 0em; border: 0px}
	#menucontainer li{margin: 0em; display: inline;}
	#menucontainer li a{font-size: 12px; text-decoration: none;text-align:center; margin-left: 0em; padding: 0.4em 4em; width:90px; height:26px; }
	#menucontainer a:link{color: #ccc99e; background: transparent url(images/menuelement.jpg) no repeat center center;}
	#menucontainer a:visited{color: #ccc99e; background: transparent url(images/menuelement.jpg) no repeat center center;}
	#menucontainer a:hover{color: #ccc99e; background: transparent url(../images/menuhover.jpg) repeat-x center center; width:90px; height:26px;}

Den koden gör att det blir såhär: I FF och IE.

Om jag ändrar till det här istället:

#menucontainer li a{font-size: 12px; text-decoration: none;text-align:center; margin-left: 0em; padding: 0.4em 4em; width:90px; height:26px; }

Då får jag ungefär omvänt resultat.

Finns det någon hjälp..?

Testa och lägg en display:block i alla a: sätt även bredd och höjd på allting.

Det hjälpte inte, det blev en vertikal meny ute till vänster istället...

Nu är det nästan rätt, bara att menyn inte är centrerad. Jag har nu satt bredd och höjd på alla a:element. (width: 90px; height: 26px;) Som det är nu är den lite förskjuten åt höger...

har nu fixat problemet som var förut, nu till ett annat problem. Jag vill ha länkarna centrerade i höjdled i meny-div:en. Som det är nu är texten i överkant. Det fungerar inte med padding-top på #menu li a, för då åker hela listelementet ner inklusive bakgrundsbilden.

såhär ser den aktuella css-koden ut nu.

div#menu{margin: 0px; padding: 0px; height: 26px; background: url('bilder/menubg4.jpg') no-repeat; width: 704px;}

	#menu ul{list-style-type: none; padding: 0em; margin: 0em; border: 0px}
	#menu li{margin: 0em; display: inline;}
	#menu li a{float:left; font-size:12px; font-family: Trebuchet MS; text-decoration: none; text-align:center; margin-left: 5.7em; padding-top: 0em; width:90px; height:26px; }
	#menu a:link{color: #ccc99e; background: transparent url('bilder/menuelement2.jpg') no repeat center center; width:90px; height: 26px;}
	#menu a:visited{color: #ccc99e; background: transparent url('bilder/menuelement2.jpg') no repeat center center; width:90px; height: 26px;}
	#menu a:hover{color: #ccc99e; background: transparent url('bilder/menuhover3.jpg') repeat-x center center; width:90px; height:26px;}