Hallo zusammen,

habe mir jetzt anhand von Little Boxes ein kleines Menü gebastelt. Das ist bisher nebeneinander (im Firefox und IE 7), im IE 6 leider nicht, da ist es irgendwie untereinander und ich weiß nicht, wieso.

HTML:
Und in der CSS Datei:

Jetzt habe ich das Problem, dass die drei Links im FF und IE 7 korrekt rechts nebeneinander angezeigt werden. Im IE 6 hingegen ist dies nicht der Fall. Da werden die Links untereinander angezeigt. Weiß jemand, wie das ändern kann?

Dann habe ich noch eine kleinere Frage:
Ich möchte jetzt noch ein verschachteltes Menü daraus machen. Habe deshalb eine zweite <ul> eingefügt und dann im CSS auch mit den Display Varianten ausgeblendet und wieder eingeblendet. Soweit kein Problem.
ABER:
Ich kriege es nicht hin, dass die erscheinenden links genau unter dem Link sind, von dem aus sie aufgerufen werden. Die sind dann entweder ganz rechts am Bildschirm oder irgendwo anders.

Die Lösung für das erste Problem findest Du im viertletzten Absatz meines FAQ-Beitrages: http://xhtmlforum.de/40267-faq-haeuf...tml#post296439

Für das zweite Problem bitte Code und/oder Link.

Sorry, mir fällt gerade erst auf, dass ich das im XHTML Forum gepostet habe...sollte eigentlich zu CSS.

Danke dir erstmal und auch Peter für die PN. Stimmt jetzt soweit.

Dafür habe ich jetzt wieder ein anderes Problem
Hab davon auch mal einen Screenshot gemacht - links FF wieder richtig, rechts IE 7 - kagge:


Der Code oben ist geblieben, bis auf die Hover Angaben, die ich wie folgt per CSS erweitert habe:

Verstehe nicht, wieso der IE z.B. unten keinen Border macht (sieht man auf der Grafik)... ist mir ein Rätsel.

Edit: Ach und wegen dem 2. Problem, komme ich auf euch zurück, ich würde da gerne erst nochmal selbst probieren...

Meinst du das Buch "Little Boxes"?
Da wird die horizontale Navigation in Kap. 8 mit display:inline erstellt, nicht mit float. Einen Abschnitt über eine float-Navigation habe ich gerade für Buch 02 geschrieben. Inklusive der genauen Unterschiede zu display:inline und der Konsequenzen daraus.

Ein Kapitel über eine horizontale Navi mit zweiter Ebene ist auch drin, wo die Unterpunkte wahlweise ganz außen oder direkt unter dem aktuellen Menüpunkt beginnen

Du schreibst dort "Wenn #navi a sowohl display: block; als auch Layout hat. In diesem Falle schafft Abhilfe, außer <li> auch <a> zu floaten (natürlich ebenfalls ohne width)."

Ich habe gerade mal den Code von Harald kurz getestet, und die Listenelemente stehen im IE<7 nur untereinander, wenn sie height bekommen. width etc. verändert nichts. Es scheint also nicht nur um hasLayout zu gehen, sondern mehr direkt um die feste Höhe. Kannst du das aus deiner Erfahrung bestätigen?

__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«

Das Problem des fehlerhaften Shrink-Wrapping tritt nicht auf, wenn das Element eine feste Breite hat -- denn dann muss es nicht "shrink-wrappen".

Fricca,
danke für den Direktlink. Das beseitigt alle Fragen:
Ich kenne die Übersetzung des Artikels von Corina, ich kenne die Passage über Shrinkwrap, nur haben meine Synapsen irgendwie die Verbindung nicht hingekriegt

__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«

@Peter: Das muß ich in dem Text deutlicher formulieren - bei width passiert die ungewollte Ausdehnung über die volle Breite natürlich nicht, denn dann schrumpft li natürlich korrekt auf die definierte Breite des enthaltenen a zusammen.

In dem Text ging ich automatisch davon aus, daß a in diesem Falle nicht per width Layout bekommt (zumal ich ja eh ständig davon abrate), da es absolut keinen Sinn ergäbe, li ohne width zu floaten, wenn a eine hat.

Aber das muß dem Leser des Textes nicht klar sein, also schreibe ich das gleich noch explizit dazu.

Verzeiht meine Unkenntnis, aber kann ich das letzte Problem mit dem Hover, dass IE unten keinen Border anzeigt auf einen Schrumpfmechanismus zurückführen? Habe davon bisher noch nie was gehört

Bei Deinen Code-Schnipseln kommt die border bei mir auch im IE 6.

Unabhängig davon: Lasse border beim Hovern nie aus dem Nichts kommen, sondern gleiche ihren benötigten Platz durch padding im Normalzustand aus.

Hmm, nee bei mir zeigt der IE 6 und 7 das so an, wie es oben auf dem Screenshot zu sehen ist. Oben ist rot anstatt weiß und unten ist gar kein Border.

Hä? Welchem Element gebe ich vorher denn das Padding? Wenn ich dem

#navigation li {
padding:0 3px 3px 3px;
}

gebe, weil ich ja rechts und links und unten 3px border hinzufüge, verschiebt es den Link trotzdem nach rechts, wenn ich drüber gehe.

Ebenso wenn ich dem a-Element das Padding gebe.