Ich habe gestern und vorgestern an einem neuen Template gebastelt und habe es jetzt soweit fertig. Dabei habe ich die meiste Zeit an einem horizontalem Listen-Menü verloren.
Es handelte sich eigentlich um ein einfaches Konstrukt, die Links sollten horizontal angeordnet werden und als Hover-Effekt sollte unter jedem Link ein 3 Pixel breiter Rahmen erscheinen, zusätzlich sollte das Menü neben dem Logo erscheinen.
Wie gehabt, Mozilla machte keine Probleme. Allerdings zeigt Internet Explorer 6 nur 1 von den 3 Pixeln des Rahmens. OK, ein bißgen an Padding gebastelt, dann ging es hier auch. IE 5.5 gab sich soweit zufrieden. Opera 7.5x auch.
ABER, IE 5.0 nicht. Um die Listenelemente horizontal anzuordnen musste man ihnen die Eigenschaft display: inline; vergeben. In diesem Falle ignoriert IE 5.0 jegliche Padding- und Marginangaben innerhalb der Listen. Der Hovereffekt wurde natürlich auch nicht angezeigt. Daher musste ich entweder den Listenelementen oder den Links display: block; und float: left; vergeben. IE 5.0 schluckte dies und zeigte alles brav an. Allerdings bockte Opera jetzt, die Liste erschien vertikal angeordnet.
Wat nun? Einen Hack wollte ich nicht einsetzen. Die einzige Möglichkeit war die ganze Liste innerhalb eines Div-Blocks zu verpacken und dem Div musste man eine Breite vergeben. Das war wiederum nicht gut, weil die Liste je nach Anzahl der Elemente, logischerweise, in ihrer Breite variiert. Daher habe ich auf die verzichtet.
Lange rede kurzer Sinn. Horizontale Listenmenüs sind zwar was feines und man kan sehr schöne Menüs damit realisieren. Aber wenn es darum geht sie innerhalb bestimmter Elemente zu positionieren oder z. B. neben dem Logo zu platzieren, dann bockt der eine oder andere Browser.
Hacks, um z. B. Netscape 4.x und/oder IE 5.x (Mac) auszusperren, sind OK. Da diese Browser nicht mehr weiterentwickelt werden und es sich im Falle von NN 4.x (import-Weiche) um imho keinen richtigen Hack handelt sondern um die Unfähigkeit des Browser die import-Angabe zu interpretieren.
Aber all die anderen Hacks können ins Auge gehen, je nach dem wie der Browser weiter entwickelt wird, könnte es sein das die dann genau diesen Hack dann doch interpretieren können.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
[…] ibt es hier auch einige Tücken und Problemchen, mehr als bei vertikalen Listen. Siehe auch Probleme mit horizontalen Listen. Denn man muss ein Blockelement (Liste) in ein inlin […]
Soweit ich mich erinnern kann, und ich habe auch wg. des IE 5 geflucht, war die Lösung die Nutzung von border statt margin. Das klappt natürlich nur, solange Du keinen Rahmen um die Links haben willst. Manchmal ist er IE 5 Win der neue NS 4.x.
Oh ja. Besonders schön wird das ganze, wenn du versuchst, die horizontale Liste am rechten Rand auszurichten.
Als Tipp: floats helfen wunderbar, das umhüllende div sollte 100% Breite haben.
@Kron,
Wenn ich dem Div die Breite von 100% gegeben habe, dann hat es sich bis ins unendliche ausgebreitet.
In der Zukunft werde in solchen Fällen eher klassisch vorgehen. Nein, nicht mit Tabellen 😉 sondern einfach die Verweise innerhalb eines Divs.
Ich kann mich an einen Bericht von einem “Webguru” (kann mich jetzt nicht genau erinnern ob Zeldmann, der macher von Clagnut oder Stopbit) der behauptete, daß es nicht unbedingt semantisch richtig wäre die Navi über eine Liste zu realisieren, die Begründung klang damals für mich plausibel. Momentan finde ich den Link nicht mehr.
Schön, dass Tabellen schon als klassisch angesehen werden. Also in dem Sinne, dass sie zitiert, aber nicht mehr angewendet werden. Mit der horizontalen Liste: In meinem Weblog habe ich das oben recht realisiert. Zwar mehr als Verlegenheitslösung, aber immerhin.
Solange ich die Navi oben links (vor allem links!) anordnen kann, ist das alles kein Problem.
Ob ich die Navigationslinks aufliste oder nebeneinander schreibe ist für mich weniger eine Frage der Semantik als der Praktikabilität. Listen sind für mich einfach gut geeignet und sind auch noch ohne CSS gut bedienbar. Ich glaube, es war Doug Bownman, der gegen die horizontalen Listen schrieb, weil dies ja auch mit Spacerblanks und senkrechten Strichen realsiert werden könne.
Wieso nimmst du auf den IE5.0 noch Rücksicht? Gibt es noch soviele IE5.0-Nutzer?
conditional comments sind eine brauchbare unterstützte variante um dem ie 5.0-problem beizukommen
@Horst,
so um die 5-6% sind das schon.
@wurstkaiser,
da ich Parallelinstallationen von IE 5-6 habe, kann ich nicht testen ob die CC auch richtig greifen.
@Perun
Bei der Paralellintallation von IE5.0/5.5/6.0 kannst du eben nicht testen, wie die ConditionalComments greifen. Auch wenn du so die Fehler in den Rendering Engines nebeneinander sehen kannst, werden die CC immer nur nach IE 6.0-Art geprüft.
Die anderen beiden sind quasi ohne Selbstbewusstsein und tun trotz ihrere persönlichen Fehler so, als ob sie IE6 wären.
@Kronn,
ich habe das nicht vergessen und auch nicht gemeint. Denn ohne das Wort “nicht”, macht mein Satz im Kommentar Nr. 7 keinen Sinn.
Denn auf die Frage warum man etwas nicht nutzt mit “weil ich es testen kann” zu antworten macht wenig Sinn 🙂
Ich weiss schon das man bei der Paralelinstallation das testen von CC knicken kann.
Oh! Das habe ich wohl das nicht nicht gesehen, nicht wahr?
Es las sich nur komisch, so wie es war, weshalb ich das nochmal erwähnen wollte. Nenn mich Pedant, sollte kein Angriff sein.
Obwohl es natürlich einigermaßen cool sein kann, etwas nicht zu nutzen, eben weil man es ja testen könnte. So nach dem Motto: Das wäre zu einfach. 😉