✔ IE Kompatibilität für Menü

Hi,

wenn du diesmal an den funktionsrelevanten CSS- und JS-Code-Passagen (CSS-Selektoren, ID-Name des ul-Listenelements) des "Suckerfish-Dropdown" keine Änderungen vornimmst, so wie in deinen letzten Probeläufen, sollte dem Entwicklerglück auch nichts mehr im Wege stehen.

mfg Maik
 
Bei mir ist in deinem Beispiel der Abstand von Submenü zu Menü im Firefox um einiges größer als der im IE. Da mein Header einen begrentze Breite hat, wird dadaurch das Submenü außerhalb eingeblendet.

Außerdem ist bei mir der Unterstrich über die ganze Breite und nicht nur unter dem LInk.

EDIT: Mit welcher EInstellung kann ich das Submenü ein wenig weiter nach oben schieben?
 
Zuletzt bearbeitet:
Der größere Abstand wird aber nur vom FF3 erzeugt, wie ich gerade seh. FF2 setzt hier den horizontalen Abstand zwischen der oberen und unteren Menüebene wie die übrigen Browser (IE, Opera, Safari).

Code: 
#nav li ul { /* second-level lists */
                position : absolute;
                left: -999em;
                margin-left : 180px; /* paßt in allen Browsern, außer im FF3! */
                margin-top : -1.35em;
}

Ansonsten entferne hier mal diese beide Regeln:

Code: 
#nav, #nav ul { /* all lists */
                padding: 0;
                margin: 0;
                list-style: none;
                float: right;
                width : 180px;
                margin-right:180px;
                display:inline;
}

und erweiter stattdessen das Stylesheet hiermit:

Code: 
#nav {
                position:relative;
                right:180px;
}
um das Hauptmenü vom rechten Header-Rand einzurücken.

Dies hat dann aber zur Folge, dass du hier den Wert für die IEs angleichen (erhöhen) mußt:

Code: 
<!--[if IE]>
<style type="text/css">
#nav li ul { margin-left:0px; }
</style>
<![endif]-->

Die vertikale Position des Submenüs wird hier über die margin-top-Deklaration geregelt:

Code: 
#nav li ul { /* second-level lists */
                position : absolute;
                left: -999em;
                margin-left : 180px; 
                margin-top : -1.35em; /* vertikale Ausrichtung des Submenüs */
}

Wenn sich der "Unterstrich" (border-bottom) nicht über die gesamte Menübreite erstrecken soll, ersetzt du hier eben die beiden markierten Regeln durch float:right:

Code: 
#nav li a {
                width: 180px;
                display : block;
                color : #888;
                font-weight : bold;
                text-decoration : none;
                border-bottom:1px dashed #fff;
}


mfg Maik
 
Danke habs noch ein wenig angepasst und funktioniert soweit nun alles in allen mir zur Verfügung stehenden Browsern.
Ich habe allerdings noch eine Frage, bei der ich mir nicht sicher bin, wo ich das genau in der .css einfügen muss (unter welchem Punkt):
Im Moment ist alles rechtsbündig. Ist es möglich das Submenü linksbündig zu zentrieren?
Ich habe verswucht es mit:
Code: 
#nav li ul li { 		
                text-align: left;
        }

Allerdings bisher ohne Erfolg, auch meine anderen Versuche funktionierten nicht. Ich denke ich muss
Code: 
#nav li { /* all list items */
hier etwas verändern und die beiden Listen (Hauptmenü und Submenü) getrennt stylen.
Außerdem würde ich gerne die beiden a Tags getrennt stylen im CSS. Bei denen handelt es sich aber wahrscheinlich um das selbe Problem wie mit den Listen...
Wie stell ich das am besten an?

Noch eine abschließende Frage: Muss ich das Menü erneut bearbeiten, sobald ein neuer Browser (z.B. FF4 oder IE8) rauskommt oder sollte es auf diesen keine Probleme geben (wie jetzt mit FF2 und FF3)?
 
Neben der von dir erprobten Regelerweiterung ist zusätzlich diese hier erforderlich, damit die Links der Submenüs linksbündig ausgerichtet werden:

CSS: 
#nav li ul li a { float:left; }

denn hier steht:

CSS: 
#nav li  a { float:right; }

... was derzeit für alle Links beider Menüebenen gilt.

Über diesen Selektor "#nav li ul li a" hast du dann auch die Möglichkeit, diese Links gegenüber denen der oberen Menüebene gesondert zu gestalten.

Was die Kompatibiltät deines Stylesheets in den zukünftigen Browsern betrifft, kann ich dir heute nichts mit Sicherheit zu sagen, außer: "Abwarten und Tee trinken" :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück