CSS Menü Probleme

[Ingo Schmidt]

Hi!

Ich hab nun also auch mein CSS-Menü gebastelt. Im Prinzip funktioniert es auch ziemlich gut, zumindest mit aktuellen Browsern. Es gibt aber einfach überall noch kleine Dinge, die ich mir nicht so recht erklären kann.

Firefox 2:
Läuft fast perfekt:
Bewegt man die Maus vom Menütitel auf den ersten Menüeintrag, wird dieser oftmals nicht selektiert dargestellt. Das Verhalten erscheint mir unvorhersagbar. Mal geht's, mal nicht. Was ist das denn?

Firefox 1.5:
Selbes Problem wie FF2. Zusätzlich noch:
Der Hintergrund der Menüeinträge wird nicht auf voller Breite gezeichnet. Verstehe ich nicht.

Firefox 1.0.7:
1. Bricht im Gruppenkalendermenü genau so seltsam um wie Opera
2. Menüs klappen zu, sobald man mit der Maus hinfährt.

IE7:
Läuft fast perfekt:
1. Menü "Persönliche Kalender": Kaum bewegt man die Maus auf die Menüeinträge, geht die Breite fast auf die Hälfte zurück. Warum? Ich sehe es nicht...
2. Hat man in einem Menü bis zum Ende gescrollt, wird ab nun die Hauptseite gescrollt. Lässt sich das verhindern?

IE5+6:
Geht nicht, muss ich mit JavaScript machen.

Opera 9.10
1. Immer horizontaler Slider. Wie bekomme ich den weg?
2. Warum wird im Gruppenkalendermenü so dämlich umgebrochen?
3. Die Slider der Menüs springen oft auf ihre Grundposition zurück, wenn man mit der Maus über die Menüeinträge fährt. Bug in Opera?
4. Siehe Problem 2 von IE7

Ich weiß einfach nicht weiter. Ich bin leider kein CSS Experte. Ich hoffe, hier kann mir jemand einen Tipp geben, wo ich was verbessern kann.
Ich bin bereit, notfalls für jeden Browser sein eigenes CSS zu machen (obwohl sowas doch eigentlich ein Witz ist...)

Cheers, Ingo =;->

[Compiwurstel]

Hallo Ingo,

Ich hab nun also auch mein CSS-Menü gebastelt. Im Prinzip funktioniert es auch ziemlich gut, zumindest mit aktuellen Browsern. Es gibt aber einfach überall noch kleine Dinge, die ich mir nicht so recht erklären kann.

ohne Deinen CSS-Code wird dir das hier vermutlich auch niemand erklären können!
Viele Grüße Compiwurstel

[Ingo Schmidt]

Hi!

ohne Deinen CSS-Code wird dir das hier vermutlich auch niemand erklären können!

Nunja, der Link zum CSS File ist ja im Quelltext zu sehen. Daher dachte ich, dass so viel Copy&Paste unnötig sei.
Also hier dann auch der passende direkte Link zum CSS:
http://www.der-ingo.de/test/css-menu/rev3/formate.css

Cheers, Ingo =;->

[Compiwurstel]

Hallo Ingo,
alles kann ich leider nicht nachvollziehen, weil ich nicht alle Browservarianten auf meinem PC habe. Deshalb nur ein paar Beobachtungen:
Wenn du im css-Format "..menubar .dropmenu:hover .menubox" den width-Wert anstatt auf "auto" auf eine konkrete Größe, z.B. 200px stellst, dürfte das Problem mit der Breite gelöst sein.
Du hast in dem Menü die Link-Definitionen in ein div gepackt, der Referenz selbst aber keine Klasse zugewiesen. Kann sein, dass da manche Browser muckern!
Gruß Compiwurstel

[Ingo Schmidt]

Hi!

alles kann ich leider nicht nachvollziehen

Kein Problem. bin ja schon für jeden noch so kleinen Tipp dankbar. Leider kamen nicht so viele bisher, weder hier noch im Usenet. Scheint wohl ein schwerer Fall zu sein ;-)

Wenn du im css-Format "..menubar .dropmenu:hover .menubox" den width-Wert anstatt auf "auto" auf eine konkrete Größe, z.B. 200px stellst, dürfte das Problem mit der Breite gelöst sein.

Ja, leider verbietet sich diese Lösung, da auf der echten Seite diese Menüs dynamisch mit Inhalt gefüllt werden und immer so breit sein sollen, wie der breiteste Eintrag.

Aber als Notlösung - und dann eben bei besonders langen Einträgen mit horizontalem Scrollbalken - wäre das noch akzeptabel :-)

Du hast in dem Menü die Link-Definitionen in ein div gepackt, der Referenz selbst aber keine Klasse zugewiesen. Kann sein, dass da manche Browser muckern!

Wie meinst du das? Sollte ich anstelle von:
<div class="menuentry"><a href="#">bla</a></div>
lieber:
<div class="menuentry"><a href="#" class="menulink">bla</a></div>

schreiben? Das soll einen Unterschied machen? Oder meintest du es nicht so?

Cheers, Ingo =;->

[MudGuard]

Hi,

bei Dir kommt zur divitis auch noch eine classitis dazu.

Wozu hast Du z.B. um h1 noch ein div rumgepackt? Welchen Zweck hat dieses Div?

Für die Menüs bieten sich Listen an. Eine für die Hauptmenüpunkte, und zu jedem Hauptmenüpunkt eine Liste für die Unterpunkte.-

Und wenn alle Kinder eines Elements dieselbe Klasse haben wie bei Dir z.B. alle <div class="menuentry"> in <div class="menubox">, ist die Klasse vollkommen überflüssig, da der Nachfahrenselektor existiert (und den kennst Du ja, siehe #headline h1).

Bei dem div-Gewusel hab ich keine Lust, mich reinzuwühlen, wo was schiefgeht.

cu,
Andreas