[CSS] Menu background-colors in IE

[We Are Borg]

Hopelijk klopt mijn omschrijving van het titel van dit topic, want hier ligt volgens mij het probleem.

Ik heb een erg simpel CSS menu gemaakt. Bestaan er genoeg van, maar heb het zelf in elkaar gezet om zo nog wat te leren. Alles werkt prima in Firefox, Opera, Netscape, maar niet in IE.

www.planet.nl/~terps407/got/menu.html
www.planet.nl/~terps407/got/css/default.css

Een zoekactie op GoT en google gaf mij de oplossing om een width: 100%; aan de LI toe te voegen. Dit werkt gedeeltelijk (het menu klopt dan nog steeds niet perfect qua uitlijning, zie ook hier voor een voorbeeld, maar de hover blijft helaas afwezig.

Zonder die width toe te voegen aan de LI kan je klikken op de tekst en krijg je een gedeelte te zien van de lay-out zoals het getoond wordt in andere browsers.

Hoe kan ik mijn code verbeteren om dit ook werkend te krijgen in IE ? Ik ga er niet vanuit dat die width: 100%; een stap is in de goede richting, maar het was i.i.g. een oplossing die het resultaat iets verbeterde.

[Johnny]

hover werkt in MSIE alleen op <a> links.

Al die <span> tags zijn ook onnodig.

[Billie]

Misschien kun je IE7 gebruiken?

[crisp]

http://allcrispy.com/meuk/menu.html

[We Are Borg]

Meneer crisp, u bent een held

[crisp]

even resumé van wat ik gedaan heb, vnl om de vele CSS bugs in IE te omzeilen:

-geen padding op de UL - IE rendert dan de eerste LI verkeerd; in plaats daarvan heb ik extra margins op de LI's toegepast
-SPANs verwijdert - die hadden hier geen nut; de span-truuk gebruik ik enkel als ik plaatjes wil gebruiken zodat textreaders alsnog tekst te zien krijgen
-height op de LI gezet
-Anchors display:block, width, padding en line-height gegeven; de width overrule ik voor andere browsers, daar is de display:block al voldoende om 'm de volledige breedte te laten pakken en met width:100% kom je dan niet meer goed uit vanwege de padding (IE is in quirks mode)
-hover op de anchor tag gezet