Hallo...
hab hier ein typisches iframe-Design mit einer Navigation im Header. Bei 2 Buttons soll onMouseover unter ihnen ein div-Dropdown-Menu erscheinen. Funktioniert soweit wunderbar im IE, aber nicht im FF.
Hier die Seite:
Lintorfer - Tollhaus
Es geht um die Buttons: "Unsere Hunde" und "Sonstiges".
Fährt man mit der Maus über einen der Buttons erscheinen gleich 2 div-Layer. Einer mit dem dropdown-Hintergrundbild, das ich zusätzlich mit dem opacity-Filter unterlegt habe (ich weiss das funzt so auch nicht im FF, aber darum kümmer ich mich wenn die Layer ansich laufen...), und ein weiterer Layer, der über dem ersten Layer erscheint, mit den eigentlichen weiteren Links. Sprich: Jedes Dropdown-Menü besteht aus 2 div-Layern...
Hier der html-Code für die Navigation im Header:
Das ist der html-Code der div-Layer:
Dabei ist "menu1" der Hintergrund vom Dropdown-Menü unter "Unsere Hunde", "menu2" die Links zu diesem Dropdown-Menü und "menu3" und "menu4" analog für das Dropdown-Menü unter "Sonstiges".
Die Funktionen "auf('menu1')" oder "zu('menu1')", etc. sind im Javascript "menu.js" definiert. Der Code dieser Datei ist hier:
Die Eigenschaften der 4 Layer sind zudem im Stylesheet der Seite definiert. Der Code dazu hier:
Ich weiss das ist jetzt echt viel Code, den ich Euch hier um die Ohren hau ;ugl, aber ich weiss echt nicht wo hier das Problem für FF versteckt ist.
Vielen Dank schonmal für Eure Hilfe.
Gruß brechti
hab hier ein typisches iframe-Design mit einer Navigation im Header. Bei 2 Buttons soll onMouseover unter ihnen ein div-Dropdown-Menu erscheinen. Funktioniert soweit wunderbar im IE, aber nicht im FF.
Hier die Seite:
Lintorfer - Tollhaus
Es geht um die Buttons: "Unsere Hunde" und "Sonstiges".
Fährt man mit der Maus über einen der Buttons erscheinen gleich 2 div-Layer. Einer mit dem dropdown-Hintergrundbild, das ich zusätzlich mit dem opacity-Filter unterlegt habe (ich weiss das funzt so auch nicht im FF, aber darum kümmer ich mich wenn die Layer ansich laufen...), und ein weiterer Layer, der über dem ersten Layer erscheint, mit den eigentlichen weiteren Links. Sprich: Jedes Dropdown-Menü besteht aus 2 div-Layern...
Hier der html-Code für die Navigation im Header:
Code:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="65"></td>
<td width="107" align="center"><a class="nav" href="home.html" target="main" onMouseover="zu('menu1');zu('menu2');zu('menu3');zu('menu4')">Home</a></td>
<td width="3"></td>
<td width="107" align="center"><a class="nav" href="#" onMouseover="auf('menu1');auf('menu2');zu('menu3');zu('menu4')">Unsere Hunde</a></td>
<td width="3"></td>
<td width="107" align="center"><a class="nav" href="activities.html" target="main" onMouseover="zu('menu1');zu('menu2');zu('menu3');zu('menu4')">Aktivitäten</a></td>
<td width="1"></td>
<td width="107" align="center"><a class="nav" href="#" onMouseover="zu('menu1');zu('menu2');auf('menu3');auf('menu4')">Sonstiges</a></td>
<td width="2"></td>
<td width="107" align="center"><a class="nav" href="javascript:windowgb()" onMouseover="zu('menu1');zu('menu2');zu('menu3');zu('menu4')">Gästebuch</a></td>
</tr>
</table>
Code:
<div id="menu1" class="menu1" onMouseover="auf('menu1');auf('menu2')" onMouseout="zu('menu1');zu('menu2')">
<table border="0" cellspacing="0" cellpadding="0" width="110" height="140">
<tr><td><img src="dropdown1.gif" style="FILTER: alpha(opacity=60)" /></td></tr>
</table>
</div>
<div id="menu2" class="menu2" onMouseover="auf('menu2');auf('menu1')" onMouseout="zu('menu2');zu('menu1')">
<table border="0" cellspacing="0" cellpadding="0" width="110" height="140">
<tr><td width="110" height="8" colspan="2"></td></tr>
<tr><td width="8"></td><td width="102" align="left" valign="top"><a href="scotty.html" target="main" class="nav2">Scotty</a></td></tr>
<tr><td width="8"></td><td width="102" align="left" valign="top"><a href="buffy.html" target="main" class="nav2">Buffy</a></td></tr>
<tr><td width="8"></td><td width="102" align="left" valign="top"><a href="bo.html" target="main" class="nav2">BO</a></td></tr>
<tr><td width="8"></td><td width="102" align="left" valign="top"><a href="toller.html" target="main" class="nav2">Der Toller</a></td></tr>
<tr><td width="8"></td><td width="102" align="left" valign="top"><a href="news.html" target="main" class="nav2">Neuigkeiten</a></td></tr>
<tr><td width="8"></td><td width="102" align="left" valign="top"><a href="bilder01.html" target="main" class="nav2">Bilder / Pictures</a></td></tr>
<tr><td width="110" height="5" colspan="2"></td></tr>
</table>
</div>
<div id="menu3" class="menu3" onMouseover="auf('menu3');auf('menu4')" onMouseout="zu('menu3');zu('menu4')">
<table border="0" cellspacing="0" cellpadding="0" width="110" height="50">
<tr><td><img src="dropdown2.gif" style="FILTER: alpha(opacity=60)" /></td></tr>
</table>
</div>
<div id="menu4" class="menu4" onMouseover="auf('menu4');auf('menu3')" onMouseout="zu('menu4');zu('menu3')">
<table border="0" cellspacing="0" cellpadding="0" width="110" height="50">
<tr><td width="110" height="7" colspan="2"></td></tr>
<tr><td width="8"></td><td width="102" align="left" valign="top"><a href="links.html" target="main" class="nav2">Links</a></td></tr>
<tr><td width="8"></td><td width="102" align="left" valign="top"><a href="kontakt.html" target="main" class="nav2">Kontakt</a></td></tr>
<tr><td width="110" height="5" colspan="2"></td></tr>
</table>
</div>Die Funktionen "auf('menu1')" oder "zu('menu1')", etc. sind im Javascript "menu.js" definiert. Der Code dieser Datei ist hier:
Code:
<!--
function auf(menu) {
if (document.all) {
document.all[menu].style.visibility="visible";
}
if (document.layers) {
document.layers[menu].visibility="visible";
}
}
function zu(menu) {
if (document.all) {
document.all[menu].style.visibility="hidden";
}
if (document.layers) {
document.layers[menu].visibility="hidden";
}
}
//-->
Code:
div.menu1 {position:absolute; top:178; left:466; height:100; width:326; visibility:hidden;}
div.menu2 {position:absolute; top:178; left:466; height:100; width:326; visibility:hidden;}
div.menu3 {position:absolute; top:178; left:684; height:50; width:110; visibility:hidden;}
div.menu4 {position:absolute; top:178; left:684; height:50; width:110; visibility:hidden;}Vielen Dank schonmal für Eure Hilfe.
Gruß brechti
