nicht angemeldet
Suckerfisch und APScrollable Area vertragen sich nicht
Hallo miteinander,
ich habe folgende Seite gebastelt: http://www.teutoware-kunde.de/kundenbereich/eagle_air/content/index.php
Dort benutze ich für die Menüs Son of Suckerfish Dropdowns (http://www.htmldog.com/articles/suckerfish/dropdowns/) und für die Scrollbar Absolutely Positioned Scrollable Area (http://www.dhtmlshock.com/scrollers/APScrollableArea/default.asp).
Nun zu meinem Problem: Die Menüs funktionieren einwandfrei mit Mozilla und ich kann auch gleichzeitig scrollen. Im IE funktioniert auch das Scrollen, aber die Menüs nicht. Nehme ich das JS für die Scrollbar heraus, so funktioniert das Menü auch wieder. Das ist schon eine Last mit dem lieben IE. ;-)
Das ist der JS-Code, damit das Menü im IE funktionieren soll. Eingebunden wird er über den header:
...
<!--[if IE]>
<style type="text/css">@import url(../styles/styles_ie.css);</style>
<![endif]-->
<script type="text/javascript" language="JavaScript1.2" src="../include/scroll.js"></script> <!-- Script für Scrollbalken -->
<script type="text/javascript" language="JavaScript1.2" src="../include/menue.js"></script> <!--Script ist für das Menü, da der IE sonst nicht funktioniert -->
Hier die menue.js:
function enable_menues_for_ie()
{
if (document.all)
{
uls = document.getElementsByTagName('UL');
for(i = 0; i < uls.length; i++)
{
if (uls[i].className == 'menue_css')
{
var lis = uls[i].getElementsByTagName('li');
for (j = 0; j < lis.length; j++)
{
if(lis[j].lastChild.tagName == 'UL')
{
lis[j].onmouseover = function() { this.lastChild.style.display = 'block'; }
lis[j].onmouseout = function() { this.lastChild.style.display = 'none'; }
}
}
}
}
}
}
window.onload = enable_menues_for_ie;
Hier die css-Datei für das Menü:
/* CSS-Menü */
.menue_css {
padding: 0;
padding-left: 40px;
padding-top: 0px;
margin: 0;
list-style: none;
z-index: 999;
}
.menue_css li {
float: left;
position: relative;
width: 120px;
padding-top: 15px;
border: 0px;
border-bottom: 1px;
border-style: solid;
border-color: #8ba3b0;
list-style: none;
z-index: 999;
}
.menue_css li ul {
display: none;
position: absolute;
top: 0pt;
left: 91pt;
width: 140px;
list-style: none;
clear: left;
padding: 0;
margin: 0;
margin: 0pt;
z-index: 999;
}
.menue_css li ul li {
padding: 0pt;
padding-top: 15px;
padding-left: 5px;
background-image: url(../content/usrimages/hintergrund_dunkelgrau.png);
border: 0px;
border: 0px;
border-bottom: 1px;
border-style: solid;
border-color: #8ba3b0;
}
li > ul {
top: auto;
left: auto;
z-index: 999;
}
li:hover ul, li.over ul {
display: block;
clear: left;
color: #a6a7aa;
z-index: 999;
}
.menue_css li ul ul {
display: none;
position: absolute;
top: 0em;
left: 106pt;
width: 140px;
list-style: none;
clear: left;
padding: 0;
margin: 0;
color: #a6a7aa;
z-index: 999;
}
.menue_css li ul li ul li {
padding: 0pt;
padding-top: 15px;
padding-left: 5px;
background-image: url(../content/usrimages/hintergrund_dunkelgrau.png);
border: 0px;
border: 0px;
border-bottom: 1px;
border-style: solid;
border-color: #8ba3b0;
}
.menue_css li:hover ul ul, .menue_css li.sfhover ul ul {
left: -999em;
color: #a6a7aa;
z-index: 999;
background-image: url(../content/usrimages/hintergrund_dunkelgrau.png);
}
/* Eigenschaften der Links für oberes Menü */
.menue_css a {
text-decoration: none;
color: #a6a7aa;
}
.menue_css a:link {
text-decoration: none;
color: #a6a7aa;
}
.menue_css a:visited {
text-decoration: none;
color: #a6a7aa;
}
.menue_css a:hover {
text-decoration: none;
color: #FFFFFF;
}
.menue_css a:active {
text-decoration: none;
color: #FFFFFF;
padding: 0px;
margin: 0px;
}
Wo könnte der Fehler liegen?
Danke für die Hilfe.
René
-
Habe die Lösung doch noch selbst gefunden. Wer mal ein ähnliches Problem hat:
Um die APScrollable Area alleine benutzen zu können, ist <script type="text/javascript" language="JavaScript1.2" src="../include/scroll.js"></script> und <body onLoad="InitialiseScrollableArea()"> nötig.
Um das Menü alleine zu benutzen reicht <script type="text/javascript" language="JavaScript1.2" src="../include/menue.js"></script>
Um beides zusammen benutzen zu können, müssen die Scripts eingefügt werden und beides (!) im body geladen werden:
<script type="text/javascript" language="JavaScript1.2" src="../include/scroll.js"></script> <!-- Script für Scrollbalken -->
<script type="text/javascript" language="JavaScript1.2" src="../include/menue.js"></script> <!-- Script für das Menü -->
<body onLoad="InitialiseScrollableArea(); enable_menues_for_ie()">Bis dann!
René