✔ DropDown funktioniert nicht im Safari

tinella · 7. März 2008

Liebe Leute

Ich hab ein Problem mit Safari. Weiss langsam echt nicht mehr weiter

Habe ein horizontales Menu anhand Suckerfish aufgebaut, nur leider funktioniert das nicht mit Safari. Mit Firefox funktioniert das super und auch mit IE7.

Die erste Ebene ist eine Aneinanderreihung von Links.
Die zweite Ebene ist eine verschachtelte Liste, in der dann auch die
dritte Ebene aufgerufen wird (=DropDown).

Die erste Ebene wird angezeigt, die zweite nicht und die dritte erscheint jeweils, wenn man unterhalb des roten Balkens rechts oben durchfährt mit der Maus.

Die Seite ist hier zu sehen.

Das CSS:

Code:

/*top-navi */
#topnavi {
	text-align: right;
	color: #eee;
	float: right;
	font-weight: bold;
}

#topnavi .selected {
	text-decoration: underline;
	background: url(/themes/energiestiftung/images/lvl1bg-hover.png) no-repeat bottom left;
}

#topnavi a {
	color: #eee;
	text-decoration: none;
	font-weight: bold;
	display: block;
	float: left;
	height: 27px;
	line-height: 27px;
	font-size: 13px;
	margin: 80px 0 0 0;
	padding: 0 12px;
	background: url(/themes/energiestiftung/images/lvl1bg.png) no-repeat bottom left;
}

#topnavi a:visited {
	color: #ffffff;
}

#topnavi a:hover {
	color: #ffffff;
	background: url(/themes/energiestiftung/images/lvl1bg-hover.png) no-repeat bottom left;
	text-decoration: underline;
}

/*top-navi level two*/
#topnavileveltwo {
	text-align: right;
	height: 25px;
	background: #df0023 url(/themes/energiestiftung/images/menubg-gloss.png) repeat-x top left;
}

#topnavileveltwo ul {
	margin: 0;
	padding: 0;
	float: right;
}

#topnavileveltwo a {
	color: #fafafa;
	text-decoration: none;
	margin: 0px;
	padding: 0 12px;
	font-size: 12px;
	line-height: 23px;
	float: left;
	background: url(/themes/energiestiftung/images/lvl2bg.png) no-repeat bottom left;
}

#topnavileveltwo a:hover {
	background: url(/themes/energiestiftung/images/lvl2bg-hover.png) no-repeat bottom left;
	color: #ffffff;
	text-decoration: underline;
}

#topnavileveltwo .selected a {
	color: #ffffff;
	text-decoration: underline;
	background: url(/themes/energiestiftung/images/lvl2bg-hover.png) no-repeat bottom left;
}
#topnavileveltwo .selected .leftnavilevelthree a {
	color: #ffffff;
	text-decoration: none;
}

#topnavileveltwo .selected .selected {
	color: #ffffff;
	text-decoration: underline;
}

/*for dropdown*/
#topnavileveltwo ul, #topnavileveltwo li {
	padding: 0px;
	margin: 0px;
}

#topnavileveltwo li {
	position: relative;
}

#topnavileveltwo ul {
	list-style: none;
}

/*ddmenu levelthree*/
#topnavileveltwo li ul {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 11px;
	width: 160px;
	margin: 23px 0 0 0;
	background-color: #df0023;
	color: #ffffff;
}

/*ddmenu levelthree*/
#topnavileveltwo li ul li a {
	display: block;
	float: none;
	text-align: left;
	text-decoration: none !important;
}

#topnavileveltwo li>ul {
	top: auto;
	left: 0px;
}

#topnavileveltwo li:hover ul {
	display: block;
	background: url(/themes/energiestiftung/images/lvl3bg-f.gif) no-repeat bottom left;
	padding-bottom: 10px;
}

/*#topnavileveltwo li:hover ul li*/
#topnavileveltwo li:hover ul li, #ieddtopnavifix li.sfhover ul li{
	display: block;
	background: url(/themes/energiestiftung/images/lvl3bg.gif) repeat top left;
	margin: 0;
	padding: 0;
}

#topnavileveltwo li ul li a {
	display: block;
	font-size: 11px;
	line-height: 20px;
	padding: 0 6px;
	border-bottom: 1px solid #ee4754;
	background: none;
	color: #f4f4f4;
}

#topnavileveltwo li ul li a:hover {
	margin: 0 6px;
	border-bottom: 1px solid #f05c68;
	background: none;
	color: #fff;
}

Falls jemand von euch eine Idee / Ansatz / Korrektur oder irgendwas hat, bitte ich um eine Antwort, bin um alle Hilfestellungen froh - egal was.

Vielen Dank fürs Anschauen,
Tinella

Maik · 7. März 2008

Hi,

wie ich dir schon in deinem Thread Liste in IE ganz verzerrt empfohlen hatte, solltest du dem Listenmenü eine ID (hier: #nav) geben, und es über diese in den CSS-Selektoren formatieren:

Code:

<div id="topnavileveltwo">
    <ul id="nav">
    ...
    </ul>
</div>

Das überarbeitete Stylesheet für main.css lautet nun folgendermaßen:

Code:

/*top-navi level two
-------------------------------------- */
#topnavileveltwo {
        text-align: right;
        height: 25px;
        background: #df0023 url(/themes/energiestiftung/images/menubg-gloss.png) repeat-x top left;
}

#nav, #nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
}

#nav {
        float: right;
}

#nav li {
        position: relative;
        float: left;
}

#nav li a {
        color: #fafafa;
        text-decoration: none;
        margin: 0px;
        padding: 0 12px;
        font-size: 12px;
        line-height: 23px;
        float: left;
        background: url(/themes/energiestiftung/images/lvl2bg.png) no-repeat bottom left;
}

#nav li a:hover, #nav .selected a {
        background: url(/themes/energiestiftung/images/lvl2bg-hover.png) no-repeat bottom left;
        color: #ffffff;
        text-decoration: underline;
}

#nav .selected .leftnavilevelthree a {
        color: #ffffff;
        text-decoration: none;
}

#nav .selected .selected {
        color: #ffffff;
        text-decoration: underline;
}

/*FOR DROP DOWN*/
#nav li:hover ul, #nav li.sfhover ul {
        display: block;
        background: url(/themes/energiestiftung/images/lvl3bg-f.gif) no-repeat bottom left;
        padding-bottom: 10px;
}

#nav ul {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 11px;
        width: 160px;
        margin: 23px 0 0 0;
        background-color: #df0023;
        color: #ffffff;
}

#nav ul li {
        float: none;
        display: block;
        background: url(/themes/energiestiftung/images/lvl3bg.gif) repeat top left;
}

#nav ul li a {
        display: block;
        float: none;
        text-align: left;
        text-decoration: none !important;
        font-size: 11px;
        line-height: 20px;
        padding: 0 6px;
        border-bottom: 1px solid #ee4754;
        background: none;
        color: #f4f4f4;
}

#nav ul li a:hover {
        margin: 0 6px;
        border-bottom: 1px solid #f05c68;
        background: none;
        color: #fff;
}

Mit diesem Quellcode funktioniert bei mir das Dropdown-Menü im Safari (3.0.4 / Win) einwandfrei.

Im IE spezifischen Stylesheet mainie.css entfernst du den rotmarkierten Teil vollständig:

Code:

/* TOPNAVI */
#topnavileveltwo, #topnavileveltwo ul {
        padding: 0;
        margin: 0;
        list-style: none;
}

#topnavileveltwo a {
        display: block;
}

#topnavileveltwo li {
    display:inline;
    position:relative;
    float: left;
}

#topnavileveltwo li ul {
        position: absolute;
}

#topnavileveltwo li:hover ul li {
        display: inline;
        float: left;
        clear: left;
        width:160px;
}

#topnavileveltwo li.sfhover ul li {
        display: inline;
        float: left;
        clear: left;
        width:160px;
}

.ieddtopnavifix li.sfhover ul li { /* lists nested under hovered list items */
        left: auto;
        background: url(/themes/energiestiftung/images/lvl3bg-f.gif) no-repeat bottom left;
        display: block;
        z-index: 9000;
        position: absolute;
        top: 0;
        left: 0;
}

und notierst stattdessen nur noch das hier:

Code:

/* TOPNAVI */
#nav ul li {
         width: 160px;
         float: left;
}

Die von dir in den ul-Elementen aufgerufene Klasse ieddtopnavifix wird nämlich überhaupt nicht benötigt.

Von der Funktionstüchtigkeit des Dropdown-Menüs im IE6 hab ich mich hier lokal mit diesem JS-Code vergewissert:

Code:

sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) {
        window.attachEvent("onload", sfHover);
}

Damit dürften dann auch die Probleme in deinem Thread Liste in IE ganz verzerrt vollends gelöst sein. ;-)

tinella · 10. März 2008

Danke für deine Antwort Maik!

Es will noch nicht, bin aber daran das auzuarbeiten. Wäre auch zu schön gewesen

Habe zwei Screenshots attached, damit man sieht wie es momentan aussieht.

Ich habe darauf geachtet, genau den selben Quelltext zu kopieren, den du gepostet hast.
Offensichtlich fehlt aber trotzdem etwas. Ich denke es liegt am umliegenden Code, weil du ja logischerweise Codeschnipsel gepostet hast und ich ev. noch was zu viel drin hab in einem file.

Hast du die entsprechenden Files (main + mainie.css) noch irgendwio gespeichert?
Falls ja, wärst du so nett und würdest mir diese zuschicken?

Wenn du die Files tatsächlich noch irgendwo hast, denke ich das wäre der einfachste Weg.

Ich probiere wie gesagt weiter

Maik · 10. März 2008

Hi,

selbstverständlich bin ich noch im Besitz der Dateien und hänge sie hier als ZIP-Datei an

Liste der enthaltenen Dateien:

css/main.css
css/mainie.css
erneuerbareenergien.htm

tinella · 10. März 2008

Es funktioniert

Maik: herzlichen Dank für deine Hilfe!

Tinella

✔ DropDown funktioniert nicht im Safari

tinella

Erfahrenes Mitglied

Maik

tinella

Erfahrenes Mitglied

Maik

Anhänge

tinella

Erfahrenes Mitglied

Neue Beiträge