OK. Erledigt... IE 6 unterstützt auch keine Transparenzen...
Hallo,
jetzt muss ich den Thread noch mal nach vorne bringen. Habe nämlich auch eine Problem mit dem IE6.
Nach ewigem rumgebastel, hat sich der KD nun entschieden, die Seite live zu schalten. Und tadaa: kein drop down im IE6.
Ich hab die Navi gehörig modifiziert - zu sehen auf
mana-mpp.de/index.php
und eigentlich ging es auch mit den Modifikationen, aber irgendwo hab ich wohl was zerschossen. Da ich aber nicht genügend Kenntnis über den Umgang mit IE6 hab, würde ich mich sehr freuen, wenn sich jemand erbarmt und sich den Code mal anschaut.
Code: Select all
#menu_container {
position:absolute;
top:142px; left:5px;
display:table;
margin: 0 0 0 0;
width: 925px;
height: 30px; /* ORG 20px */
z-index: 1000;
}
/* margin und padding auf 0, Aufzählungszeichen der unsortierten Liste unterdruecken */
#pmenu, #pmenu ul {
padding: 0;
margin: 0;
list-style-type: none;
}
/* Einstellen der Groeszen, Farben und Rahmen fuer die Links */
#pmenu a, #pmenu a:visited {
display: block;
width:110px;
padding:3px 4px 3px 4px;
font-size: 12px;
letter-spacing:0px;
text-indent:1px;
color: #fff;
height: 17px; /* ORG 25px */
line-height: 16px; /* ORG 24px */
text-decoration: none;
background-color:#888;
filter:alpha(opacity=95); -moz-opacity: 0.95; opacity: 0.95;
}
#cat-id_1 a, #cat-id_1 a:visited, #cat-id_2 a, #cat-id_2 a:visited, #cat-id_7 a, #cat-id_7 a:visited {
border-top:5px solid #FFEC01;
}
#cat-id_3 a, #cat-id_3 a:visited {
border-top:5px solid #ffc333;
}
#cat-id_4 a, #cat-id_4 a:visited {
border-top:5px solid #ff9933;
}
#cat-id_5 a, #cat-id_5 a:visited {
border-top:5px solid #ec6d28;
}
#cat-id_6 a, #cat-id_6 a:visited {
border-top:5px solid #da5812;
}
#cat-id_8, #cat-id_9, #cat-id_10, #cat-id_11, #cat-id_12, #cat-id_13, #cat-id_14, #cat-id_15, #cat-id_16, #cat-id_17, #cat-id_18, #cat-id_19, #cat-id_20 {
border-top:0px;
}
/*#cat-id_13, #cat-id_14, #cat-id_18 {
margin-left:7px;
}
*/
/* Set up the sub level borders */
/* Einstellen der Rahmen fuer die Unterebenen */
#pmenu li ul li a, #pmenu li ul li a:visited {
border-width: 0 1px 1px 1px;
border:#666 1px;
}
#pmenu li a.horiz_enclose, #pmenu li a.horiz_enclose:visited {
border-right: 1px #666;
}
/* Einstellen der Listeneinzelheiten */
#pmenu li {
float: left;
list-style-type: none;
padding-right:5px;
}
#pmenu li ul {
float: left;
list-style-type: none;
padding-right:0px;
}
/* Fuer alle nicht IE + IE7 */
#pmenu li:hover {
position: relative;
}
/* Festlegen der Farbe fuer hover li */
#pmenu li:hover > a {
background: #ddd; /* ORG #dfd7ca; */
color: #000; /* ORG #c00; */
}
/* Einstellen der Unterebenenlisten mit einer absoluten Positionierung fuer die FlyOuts und dem "Ueberfahren-Abstand"
Das transparente gif (leer.gif) ist fuer den IE gedacht */
#pmenu li ul {
display: none;
}
/* Fuer alle nicht-IE + IE7 wird die Unterebenenliste sichtbar bei einem Ueberfahren (hover) */
#pmenu li:hover > ul {
display: block;
position: absolute;
top: -7px; /* ORG -11px */
left: 80px;
padding: 6px 30px 15px 25px; /* ORG padding: 10px */
background:transparent url(../../img/article/leer.gif);
width: 115px;
}
/* Positioniere die erste Unterebene nach dem Topebenenlink */
#pmenu > li:hover > ul {
left: -25px;
top: 22px;
}
/* Tabelle neu einstellen */
#pmenu table {
position: absolute;
border-collapse: collapse;
top: 0;
left: 0;
z-index: 1000;
font-size: 1em;
}
/* Fuer den IE5 und IE6 gebe dem hover-Link eine relative Position und wechsele die Hinter- und Vordergrundfarbe. Das ist notwendig damit der IE angestoszen wird die Unterebenen auszugeben */
* html #pmenu li a:hover {
position: relative;
background: #D1D5DF; /* ORG #dfd7ca; */
color: #c00;
}
/* Fuer die Aktivierung der ersten Ebene, wenn im Menue geblättert wird */
#pmenu li a:active, #pmenu li a:focus {
background: #fff;
color: #BF4300; /* ORG #c00; */
}
/* Einstellen der Symbole/Pfeile für die Unterebenenanzeige */
#pmenu li.fly_ul {
background: #7484ad url(../../img/symbols/klapp_zu.gif) no-repeat 107px center;
/* background: #7484ad url(../../img/article/navi/fly.gif) no-repeat right center;
*/
}
#pmenu li.drop_ul {
background:transparent;
/* background: #7484ad url(../../img/article/navi/drop.gif) no-repeat right center;
*/
}
/* KH: Active Path output */
/* KH: Ausgabe des aktiven Pfads */
#pmenu li.act_path a, #cat-id_1 li.act_path a {
background:#fafafa;
color:#000;
/* background:#cccccc url(../../img/article/navi/drop.gif) no-repeat right center;
*/
}
#pmenu li.act_path a:hover {
background:#eee;
color:#000;
}
/* Dies ist fuer den IE5.5 und IE6 notwendig um die Unterebenen anzuzeigen */
/* Wechselt die Unterebenen von display:none; nach visibility:hidden; */
* html #pmenu li ul {
visibility: hidden;
display: block;
position: absolute;
top: -11px;
left: 80px;
padding: 10px 30px 30px 30px;
background: transparent url(../../img/article/leer.gif);
}
#pmenu li a:hover ul ul {
visibility: hidden;
}
#pmenu li a:hover ul a:hover ul ul {
visibility: hidden;
}
#pmenu li a:hover ul a:hover ul a:hover ul ul {
visibility: hidden;
}
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility: hidden;
}
#pmenu li a:hover ul {
visibility: visible;
left: -30px; /* (IE5 ONLY) */
top: 10px; /* ORG 14px (IE5 ONLY) */
lef\t: -31px; /* (IE6 ONLY) */
to\p: 11px; /* ORG 15px (IE6 ONLY) */
}
#pmenu li a:hover ul a:hover ul {
visibility: visible;
top: -11px; /* ORG -11px (IE6 ONLY) */
left: 80px;
}
#pmenu li a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
Ich hab die englischen Kommentare mal der Übersichtlichkeit halber raus gelöscht.
Der PHP-Code ist unangetastet.
Wäre auch über Tips für alternative Navigationen dankbar (die genau so aussehen; wie im FF, nicht IE)
danke schon mal
.
