Hilfe: list-style nur in Webkit OK. Wo ist der Fehler in der Navi?

[AndiK]

Hallo,

ich finde den Fehler einfach nicht.

Ich habe der ul einer Navigation vie list-style ein eigenes Bild gegeben. In Webkit-Browsern sieht alles wunderbar aus:

Bildschirmfoto 2013-08-10 um 14.17.30.png

Im Firefox und wohl auch in IE10 sieht das dann gar nicht mehr schön aus:

Bildschirmfoto 2013-08-10 um 14.18.59.png

Wähle als Option "outside" dann wird zwar die Grafik neben den Menüeinträgen angezeigt, sie steht dann aber nicht mehr im Menü (klar, ist ja dann auch "outside".

Hier das CSS für die Navi:

.mod_navigation {
    width:75%;
    height:17em;
    left:45%;
    top:4.5em;
    position:absolute;
    text-transform: uppercase;

}

.mod_navigation ul {
    
list-style: disc inside url("../images/page/drei_streifen_gold.gif");

}

.mod_navigation .level_1 ul {
    width: auto;
    position:absolute;
    margin:-1px 0 0;
    padding:0;
    left:-999em;
}

.mod_navigation li {
    float:left;
    padding-right:2em;
    line-height:1;
}

.mod_navigation li:hover .level_2 {
    left:auto;
}

.mod_navigation .level_2 li {
    float:none;
}

.mod_navigation a,
.mod_navigation li {
    font-size:14px;
    text-decoration:none;
}

.mod_navigation .level_1 a,
.mod_navigation .level_1 a:visited {
    display:block;
    padding-bottom:10px;
    color:#666;
}

.mod_navigation .level_1 a:hover {
    text-decoration:none;
    color: #b9a95b;
}

.mod_navigation .level_1 a:active,
.mod_navigation .level_1 a:focus,
.mod_navigation .level_1 span,
.mod_navigation .level_1 a.trail {
    display:block;
    padding-bottom:10px;
    text-decoration:none;
    color: #b9a95b;
}

.mod_navigation .level_2 a,
.mod_navigation .level_2 a:visited,
.mod_navigation .level_2 li a:hover,
.mod_navigation .level_2 li a:active,
.mod_navigation .level_2 li a:focus,
.mod_navigation .level_2 span {
    background:none;
}

.mod_navigation .level_2 a,
.mod_navigation .level_2 a:visited {
    width:100%;
    display:block;
    padding:.6em;
    background-color:rgba(255,255,255,0.8);
    border-bottom:1px solid #fff;
    font-size:14px;
    color:#666;
}

.mod_navigation .level_2 .first a,
.mod_navigation .level_2 .first a:visited {
    border-top:1px solid rgba(255,255,255,0.8);
}

.mod_navigation .level_2 li a:hover,
.mod_navigation .level_2 li a:active,
.mod_navigation .level_2 li a:focus,
.mod_navigation .level_2 span {
    width: 100%;
    display:block;
    padding:.6em;
    background-color:#fff;
    border-bottom:1px solid #fff;
    font-size:14px;
    text-decoration:none;
    color: #b9a95b;
}

Ich verzweifle fast. Das muss doch zu achen sein, oder?!?
Ich verzichte ja schon so auf allen Schnickschnack, damit das der Rest auch auf IE läuft.

Sonnige Grüße!
Andi

[stefan-at-work]

was spricht gegen

list-style-image

?

[wulf]

bis ie8 gab es probleme mit list-style und gefloateten li, evtl. liegt hier der hase vergraben.

[AndiK]

was spricht gegen

list-style-image

?

list-style ist doch die Short-Version oder nicht?

[AndiK]

Das macht auf jeden Fall keinen Unterschied.
Firefox zeigt das nicht korrekt an:

.mod_navigation ul {
    
	list-style-type: disc;
	list-style-position: inside;
	list-style-image: url("../images/page/drei_streifen_gold.gif");	

}

[AndiK]

bis ie8 gab es probleme mit list-style und gefloateten li, evtl. liegt hier der hase vergraben.

Der Kunde geht aber mit IE10 drauf.

[wulf]

list-style:disc inside url('bla.gif');

funktioniert unter ie10 ohne probleme, ergo muss das problem wo anders liegen. hast du evtl. einen link um etwas mit den dev-tools zu spielen, bin zu faul, dein code nachzubauen.

[AndiK]

Bitte sehr:

http://www.keller-leadership.com/

Bilder und Inhalte sind noch Dummys.

[FloB]

Firefox und IE verhalten sich korrekt. Problematisch ist hier die Definition:

a { display: block; }

… denn das erzeugt einen Umbruch. Besser wäre "display: inline-block;", noch besser wäre hier die meisten Style-Definitionen auf das höherliegende "<li>" (inkl. "display") zu verfrachten.

Auch kriegst du mit

a { width: 100%; }

im Level 2 Probleme, nämlich dass ein Umbruch erzeugt wird. Auch hier würde ich die meisten Style-Definitionen eine Ebene höher (zum "li") legen, und den Link einfach die Breite selber bestimmen lassen.

[AndiK]

Jetzt bin ich völlig verwirrt und hab mir alles zerhackt.

Kann mir bitte jemand durch dieses Chaos helfen?

Ich kapier's nicht, sorry…

[AndiK]

So, erste Ebene funktioniert nun...

[AndiK]

Wenn ich jetzt noch die unteren Blöcke in den Griff bekommen würde, wäre ich froh.

Bitte, helft mir aus dem Code...

[FloB]

Nach kurzem Blick auf die Seite: Passt doch alles. Musst nur noch borders and backgrounds (auch bei :hover etc.) in die Ebene drüber (<LI>) schieben.

[AndiK]

Vielen Dank für Deine Hilfe! Wie schön, dass es immer wieder hilfsbereite Kollegen hier gibt!

Ich muss mich noch mal intensiv mit den Listen beschäftigen. Das verwirrt mich immer wieder.

lg
Andi

[FloB]

Es geht hier prinzipiell nur um sinnvolle Zuordnung von Styles und Vererbung, hat eigentlich nichts speziell mit Listen zu tun.

[AndiK]

Ein Problem bekomme ich jetzt doch nicht in den Griff:

Wie schaffe ich es denn, dass die Elemente in Level 2 bei Mausberührung (hover) genau so breit unterlegt werden wie die eigentlichen Listenelemente?

lg
Andi

[Spooky]

Ein Problem bekomme ich jetzt doch nicht in den Griff:

Wie schaffe ich es denn, dass die Elemente in Level 2 bei Mausberührung (hover) genau so breit unterlegt werden wie die eigentlichen Listenelemente?

lg
Andi

nav ul li ul li a {
    display:block;
} 

Damit aber auch das Element Bild unterlegt wird, musst du das Bild dem <a> (und <span>, ggf.) selbst geben, anstatt list-style-image zu verwenden.

[FloB]

Ne, eben nicht, Spooky. Er muss einfach die Hover anpassen:

li:hover {

statt

li a:hover {

[AndiK]

FloB, schreib mir doch bitte mal den kompletten Code auf, den ich eintragen muss, ich bin scheinbar doch zu blöd, sorry.

Ich hab' jetzt alles Mögliche mit li:hover versucht, aber keine Lösung gefunden.

[Spooky]

Ne, eben nicht, Spooky. Er muss einfach die Hover anpassen:

li:hover {

statt

li a:hover {

Das (alleine) führt aber dann zu einer Diskrepanz für den User. Denn dadurch kann ein Hover Effekt zustande kommen, obwohl der Benutzer gar nicht über einen Link hovert.

[AndiK]

Hmm…

Gibt's da keine Lösung?

[FloB]

FloB, schreib mir doch bitte mal den kompletten Code auf, den ich eintragen muss, ich bin scheinbar doch zu blöd, sorry.

Ich hab' jetzt alles Mögliche mit li:hover versucht, aber keine Lösung gefunden.

Sorry, deine Arbeit werde ich nicht machen. ;-) Zeig mal lieber, was du gemacht hast, dann können wir dir deinen Fehler zeigen!

Das (alleine) führt aber dann zu einer Diskrepanz für den User. Denn dadurch kann ein Hover Effekt zustande kommen, obwohl der Benutzer gar nicht über einen Link hovert.

Prinzipiell hast du Recht. Aber das kann man dadurch umgehen, dass man (separat) den innenliegende A auf das ganze Parent Element streckt (z. B. mit position:absolute; top/left/right/bottom:0 und ggf. noch einen Event Listener mit JavaScript einfügt (aber wirklich nur als zusätzliche Maßnahme, es soll ja auch ohne zufriedenstellend funktionieren!).

[Spooky]

Prinzipiell hast du Recht. Aber das kann man dadurch umgehen, dass man (separat) den innenliegende A auf das ganze Parent Element streckt (z. B. mit position:absolute; top/left/right/bottom:0 und ggf. noch einen Event Listener mit JavaScript einfügt (aber wirklich nur als zusätzliche Maßnahme, es soll ja auch ohne zufriedenstellend funktionieren!).

Naja, aber das ist ja "mit der Kirche um's Kreuz" gestyled dann . Davon abgesehen funktioniert es mit position:absolute; top/left/right/bottom:0; nicht wirklich, da das <a> dann eine komplett andere Position bekommt, die dann nicht mehr passt.

[FloB]

… nicht, wenn der Container position:relative ist.

Ich glaube, ich habe dein Problem entdeckt, AndiK: Mathematik bzw. Layer!
Du hast bisher deinem A einen Background (white 80%) verpasst, der sich über deinen bisherigen Background des LI (white 80%) drüber gelegt wurde. Der Effekt war, dass das übereinanderlegen beider Layer ein white >80% ergibt (A INNER JOIN LI). Wenn du jetzt einfach den Background beim Hover vom A in den LI:hover überträgst, erreichst du (optisch) genau gar nichts, denn du ersetzt white 80% (LI) durch white 80% (A:hover bzw. LI:hover). D. h. im Hover musst du den Alpha-Channel anpassen. Im Screenshot habe ich 95% genommen.

[Spooky]

… nicht, wenn der Container position:relative ist.

Doch, selbst dann passt es nicht.. ist ja auch logisch, weil du das <a> ja über das gesamte <li> dann ziehst. Der Text ist dadurch dann auch nicht mehr auf der baseline.

[AndiK]

Sorry FloB, aber ich kann die "Aufgabe" nicht lösen.

Wenn Du mir den Trick nicht verraten willst, muss ich wohl damit leben.

So sieht meine CSS für die Navi momentan aus:

.mod_navigation {
    width:75%;
    height:30px;
    left:45%;
    top:4.5em;
    position:absolute;
    text-transform: uppercase;
    font-size:14px;
}

.mod_navigation ul {
   	list-style-type: disc;
	list-style-position: inside;
	list-style-image: url("../images/page/drei_streifen_gold.gif");	
}

.mod_navigation .level_1 ul {
    position:absolute;
    margin:-1px 0 0;
    padding:0;
    left:-999em;
}

.mod_navigation li {
    float:left;
    padding-right:2em;
    line-height:2.3em;
   	border-bottom:1px solid #fff;
}

.mod_navigation a,
.mod_navigation li {
    text-decoration:none;
}

/* Level 2 klappt aus */
.mod_navigation li:hover .level_2 {
    left:auto;
    width: auto;
}

.mod_navigation .level_1 a,
.mod_navigation .level_1 a:visited {
    color:#666;
}

/* Farbe der Hauptmenueintraege Hover */
.mod_navigation .level_1 a:hover {
    text-decoration:none;
    color: #b9a95b;

}

.mod_navigation .level_1 a:active,
.mod_navigation .level_1 a:focus,
.mod_navigation .level_1 span,
.mod_navigation .level_1 a.trail {
    text-decoration:none;
}

.mod_navigation .level_2 li {
    float:none;
    padding-left: 5px;
    background-color:rgba(255,255,255,0.8);
}

.mod_navigation .level_2 li a:hover {
	   background-color:white;	   	
	}

.mod_navigation .level_2 a,
.mod_navigation .level_2 a:visited,
.mod_navigation .level_2 li a:active,
.mod_navigation .level_2 li a:focus,
.mod_navigation .level_2 span {
    background:none;
}

.mod_navigation .level_2 a,
.mod_navigation .level_2 a:visited {
    padding:.6em;
    color:#666 ;
}

.mod_navigation .level_2 .first a,
.mod_navigation .level_2 .first a:visited {
    border-top:1px solid rgba(255,255,255,0.8);
}

.mod_navigation .level_2 li a:hover,
.mod_navigation .level_2 li a:active,
.mod_navigation .level_2 li a:focus,
.mod_navigation .level_2 span {
    padding:.6em;
    border-bottom:1px solid #fff;
    text-decoration:none;
    color: #b9a95b;
}

Ich würde mich aber trotzdem sehr freuen, wenn Du Dein Wissen mit mir teilen würdest. Alleine werde ich die korrekten Codezeilen nie herausfinden.

[wulf]

/* Level 2 klappt aus */
.mod_navigation li:hover .level_2 {
    left:auto;
    width: auto; 
    -bracket-:hack[;
        width:30%;
    ];
}

bei width: auto hat man unter chrome einen Umbruch

.mod_navigation .level_2 li a:hover {
	   background-color:white;	   	
	}

durch

.mod_navigation .level_2 li:hover {
	   background-color:white;	   	
	}

ersetzen

[AndiK]

DANKE! DANKE! DANKE!!!!

Auf die "Bracket-Hack"-Nummer wäre ich in hundert Jahren noch nicht gekommen!

Wulf! Du hast mich gerettet!

lg
Andi

[FloB]

Auf die "Bracket-Hack"-Nummer wäre ich in hundert Jahren noch nicht gekommen!

Davon würde ich dir abraten, Hacks fliegen dir irgendwann massiv um die Ohren!

Was wulf im zweiten Teil seines Posts geschrieben hat, hatte ich schon vorher beschrieben. So schwer war das doch nicht?

[wulf]

der hack ist ja nicht zwingend notwendig, man kann ja generell width:xx%; setzen, nur width:auto; zickt halt rum.
ansonsten hab ich tatsächlich nur das umgesetzt, was FloB geschrieben hat, der dank gilt somit ihm.
(manchmal sieht man aber vor lauter bäumen den wald nicht, da hilft dann nur noch ein blindenhund)