Horisontell lista blir trappa i IE

Jag har en liknande meny på en sida som jag gjort, och där har jag gjort ungefär såhär istället..

.menulist ul {
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;
}

[I].menulist ul li { display: [B]inline[/B];}[/I]

.menulist ul li a {
	float: left;
	font-size: 80%;
	padding: 5px;
	width: 80px;
	text-decoration: none;
	color: black;
	border-left: 1px solid #8597A6;
	border-right: 1px solid #8597A6;
	background: url("images/ponggradienthover.gif") repeat-x 20px;
	text-align: center;
}

.menulist ul li a:hover {
	border-left: 1px solid #465058;
	border-right: 1px solid #465058;
	color: white;
	background: url("images/ponggradient.gif") repeat-x;
}

<div class="menulist">
<ul>
<li><a href='createaccount.php'>New user</a></li>
<li><a href='login.php'>Log in</a></li>
<li><a href='faq.php'>FAQ</a></li>
</ul>
</div>

Finns säkert ett mycket enklare och bättre sätt, men jag tittade bara på hur jag har gjort förut eftersom jag kom att tänka på det när jag såg din meny.

Ändrade till display: inline; och satte listan i en div med menulistklassen istället, vet inte om det är "rätt", men det funkar :)

Jag tror du måste visa ALL kod och ALL CSS eftersom det är viktigt att se vad som innesluter menyn. För att det ska gå så smidigt som möjligt vore det ju bra om du kunde ladda upp sidan nånstans och ge en länk.

Danne V skrev:

För att det ska gå så smidigt som möjligt vore det ju bra om du kunde ladda upp sidan nånstans och ge en länk.

Mr. N. skrev:

Här är sidan ifråga: http://pong.muffinmilitia.net/pong2

@nders skrev:

Danne V skrev:

För att det ska gå så smidigt som möjligt vore det ju bra om du kunde ladda upp sidan nånstans och ge en länk.

Mr. N. skrev:

Här är sidan ifråga: http://pong.muffinmilitia.net/pong2

DUH.....
Jag har sagt till mig själv att INTE skriva inlägg föränn efter 4 muggar expresso...
F'låt.

Gissning:

Du har inte formaterat <li> någonstans. Delar av formateringen för <a> ska egentligen läggas på <li>, t.ex. float och även borders och annat.

EDIT: Läste nyss vad jag skrivit och kom att tänka på att det kanske bör förklaras:

Om du inte formaterar <li>, så är det sannolikt att olika webbläsare lägger in sin "default". Om då din formatering för <a> som ju ligger inuti <li> t.ex. är bredare/större/annorlunda än webbläsarens "default", så kan konstiga grejer hända.

Alltså: formatera <li> innan du formaterar <a>. Se till att få med border, padding, float, osv.

Jaha, jag tror jag har missförstått syntaxen lite. Jag trodde att .menulist li a { [X] } formaterade både <li> och <a> enligt [X], men det betyder alltså att bara <a> som ligger inom <li> formateras?

tranceformer: det finns en väldigt bra anledning till varför jag kör display: block och float: left istället för display: inline, naturligtvis kommer jag inte på vad anledningen är just nu men... ;)

Mr. N. skrev:

det finns en väldigt bra anledning till varför jag kör display: block och float: left istället för display: inline

Antagligen för att man inte kan sätta width och height på en inline. :)

Ah, just det. Ville ha knapparna i samma bredd oavsett vad länktexten var, tack Troxy. :)

Men vad händer om du bara gör den här ändringen

.menulist li {
	list-style-type: none;
	display: block;
	float: left;
	font-size: 80%;
	padding: 5px;
	width: 80px;
	text-decoration: none;
	color: black;
	border-left: 1px solid #8597A6;
	border-right: 1px solid #8597A6;
	background: url("images/ponggradienthover.gif") repeat-x 20px;
	text-align: center;
}
.menulist a{
		text-decoration: none;
}{

Hinner inte testa men tycker att det borde gå. Kanske behövs något mer i a för att det ska se ut som du vill, men för att undvika trappan...?

Troxy skrev:

Antagligen för att man inte kan sätta width och height på en inline. :)

Jaha där ser man :)

Sådär, nu blev det som jag vill ha det. :)

.menulist li {
	display: block;
	float: left;
	font-size: 80%;
	text-align: center;
}

.menulist a {
	text-decoration: none;
	color: black;
	display: block;
	float: left;
	width: 80px;
	padding: 5px;
	background: url("images/ponggradienthover.gif") repeat-x 20px;
	border-left: 1px solid #8597A6;
	border-right: 1px solid #8597A6;
	
}

.menulist li a:hover {
	border-left: 1px solid #465058;
	border-right: 1px solid #465058;
	color: white;
	background: url("images/ponggradient.gif") repeat-x;
}

Gôtt mos!