Liste der Anhänge anzeigen (Anzahl: 2)
Hilfe: list-style nur in Webkit OK. Wo ist der Fehler in der Navi?
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:
Anhang 11534
Im Firefox und wohl auch in IE10 sieht das dann gar nicht mehr schön aus:
Anhang 11535
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:
Code:
.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
Liste der Anhänge anzeigen (Anzahl: 1)
… 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.
