Son of a Suckerfish mit Bildern -> gelöst
Hallo,
mein Problem ist folgendes:
ich brache ein DropDown Menü und habe auch das Son of a Suckerfish erfolgreich eingebaut (erfolgreich da es sowohl im Firefox als auch im IE funktioniert). Der nächste Punkt ist, dass ich mit Seiten und Unterseiten arbeite - die Seite soll jeweils der Titel für das Menü sein und die Unterseiten das was aufklappt. Und zu guter letzt soll der Text (die Titel des Menüs) vertikal sein, was sich mit css (meines wissens) nicht machen lässt, weshalb ich die Titel durch Bilder ersetzen will. Das ganze habe ich auch so hinbekommen, dass es im Firefox funktioniert - nur der IE will nicht...
Die Seite um die es geht findet man hier (ich weiss, dass noch einiges im argen ist - aber erst soll die Navi gehen...)
Mein sidebar Inhalt:
erstes Menü:
<ul id="nav">
<?php
wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>
zweites Menü:
<ul id="nav">
<?php
wp_list_pages('child_of=2&title_li=<a href=""><img src="/sonne/wordpress/wp-content/themes/default_de/images/uberuns.gif"></a>');
?>
</ul>
drittes Menü:
<ul id="nav">
<?php
wp_list_pages('child_of=4&title_li=<img src="/sonne/wordpress/wp-content/themes/default_de/images/estr.gif">');
?>
</ul>meine css Angaben:
/* Navi */
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}und das javascript, welches dem IE das "hovern" beibringen soll (in der Header):
<script language="javascript">
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);
</script>Ach a ich benutze das Default_DE Theme
Wie man nun sieht gehen alle drei Menüs im Firefox, im IE jedoch nur das Obere - mein Verdacht:
Im Seitenquelltext der Ausgegebenen Seite haben die Menüs verschiedene Klassen:
<ul id="nav">
<li class="page_item page-item-2 current_page_item "><a href="http..." title="Eine Seite">Eine Seite</a>
<ul>
<li class="page_item page-item-5"><a href="http..." title="unten 1-1">unten 1-1</a></li>
<li class="page_item page-item-6"><a href="http..." title="unten 1-2">unten 1-2</a></li>
</ul>
</li>
</li>
</ul>
<ul id="nav">
<li class="pagenav"><a href=""><img src="/sonne/"></a>
<ul>
<li class="page_item page-item-5"><a href="http..." title="unten 1-1">unten 1-1</a></li>
<li class="page_item page-item-6"><a href="http..." title="unten 1-2">unten 1-2</a></li>
</ul>
</li>
</ul>nämlich einmal page_item und einmal pagenav - nur weiss ich nicht ob es wirklich daran liegt und wenn ja, wie ich das richten kann...
Über Vorschläge / Lösungen würde ich mich sehr freuen...