problem med meny

3 svar · 472 visningar · startad av altruism 17 feb. 2007

altruismMedlem sedan nov. 200664 inlägg

Trådstart17 feb. 2007 16:08#1

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!

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..?

HamatzuMedlem sedan mars 2005232 inlägg

17 feb. 2007 16:21#2

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

altruismMedlem sedan nov. 200664 inlägg

17 feb. 2007 17:17#3

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...

altruismMedlem sedan nov. 200664 inlägg

18 feb. 2007 01:22#4

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;}