vertikale Navigation - IE (6) Bug

[Daniel N.]

Hallo,

irgendwie falle ich beim Erstellen einer vertikalen Navigation immer mal wieder auf einen IE6-Bug rein.

Fogendes simples Beispiel stammt von Listamatic/Eric Meyer und zeigt diesen Bug im IE6 hervorragend: Unter jedem Navigationspunkt ist ein dicker grauer Balken zu sehen *und* der Link ist *nur* direkt auf dem Text klickbar - das <a> "blockt" nicht richtig.

Beispiel gibts "live" und mit Code unter
http://css.maxdesign.com.au/listamatic/vertical09.htm

Um welchen IE-Bug handelt es sich hier? Abhilfe scheint ein "width: 100%;" im "li a" zu schaffen. Allerdings stimmen dann die Breiten in den verschiedenen Browsern nicht mehr überein! Im IE6 ist die Navigationsleiste viel zu breit!
Dazu gibts ebenfalls ein schönes Beispiel in Listamatic:
http://css.maxdesign.com.au/listamatic/vertical10.htm

Wie macht man es "richtig" - damit auch der IE damit klar kommt, bzw. um welchen IE-Bug handelt es sich?

Das die Navigationsleiste nicht auf der gesamten Breite klickbar ist, habe ich auf häufiger im IE7 beobachet. Um welchen Bug geht es hier?

(Leider gibt es (laut meiner Server-Logs) immer sehr viele IE6-Nutzer, so dass ich diesen wohl oder übel noch unterstützen muß.)

Vielen Dank und Viele Grüße
Daniel

[Maxx]

Hi Daniel,

Beispiel gibts "live" und mit Code unter
http://css.maxdesign.com.au/listamatic/vertical09.htm

Es ist der Whitespace-Bug des IE6. Einfach die <li></li><li>... *ohne* Zwischenreaum/Zeilenumbruch aneinanderhängen. Dann klappt auf das Listamatic Beispiel.

Grüße,

Jochen

[Daniel N.]

Hi Jochen,

Es ist der Whitespace-Bug des IE6. Einfach die <li></li><li>... *ohne* Zwischenreaum/Zeilenumbruch aneinanderhängen. Dann klappt auf das Listamatic Beispiel.

Danke für den Hinweis mit dem Whitespacebug! Die Lösungsidee ist nicht so hunderprozentig, wie ich finde, denn oftmals wird das Markup generiert, so dass man nur teilweise Einfluß darauf hat. Außerdem entstünde so doch eine ziemlich fragiles Konstrukt!

Bei meiner Rechersche bin ich auf diese Seite aufmerksam geworden:
http://www.cssnewbie.com/fixing-ie6-whitespace-bug/
Da findet man eine Reihe interessanter Hinweise. Allerdings funktionieren die dort genannten Lösungen auch nicht zu 100%, z.B. sind teilweise die Links dann nicht mehr auf der vollen Breite anklickbar, also der "Buttons-Effekt" ist weg.

Zu einem weiteren Beispiel in Listamatic gibt es eine ausführliche Erklärung. Scheinbar kann man die Probleme *ohne* Hacks umgehen, indem man die Breite der Box über "li a" steuert.

also so ähnlich wie:

#navcontainer li a {  
	display: block;  
	padding: 5px 5px 5px 25px;  
	background-color: #2175bc;  
	color: #fff;  
	text-decoration: none;  
	width: 200px;  
}

Was meint ihr?

Viele Grüße
Daniel