Dropdown funktioniert nur im Firefox

[resi.eis]

Hallo miteinander,

ich habe ein Problem mit einem CSS-Dropdown-Menu.
Link: Merchant Portfolio Sales, Residuals, ATM Portfolios & ISO’s for Sale : Investment Advisory Services Firm
Unter "Company" und "Listing" befindet sich jeweils ein Dropdown. Im FF funktioniern beide, im IE funktioniert nur das "Listings"-Dropdown. Dieses wurde von unserem Programmierer (welcher derzeit im Uraub ist) erstellt. Nun habe ich versucht, den CSS-Code des "Listings"-Dropdowns zu kopieren und damit unter "Company" ein ähnliches Dropdown zu erstellen. Aber so einfach ist es scheinbar nicht. Es funktioniert nur im FF.

Hier der CSS-Code des Original-Dropdowns (Listings) - von unserem Programmierer erstellt:

#mpdropdown, #mpdropdown ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#mpdropdown li {
    float: left;
    position: relative;
}

.mpmenu{
    text-align: center;
    background:transparent url(../images/m_listings.gif);
    height:38px;
}


.mpmenu a{
    display:block;
    width: 101px;
    height:38px;
}
.mpmenu a:hover{
    display:block;
    width: 101px;
    background:transparent url(../images/m_listings2.gif);
}

.mpsubmenu{
    display: none;
    width: 165px;
    position: absolute;
    top: 37px;
    left: 0px;
}

.mpsubmenu li{
    font-size: 10px;
    text-transform: uppercase;
    text-align: left;
    height: 27px;
    border-bottom:1px solid #102C3C;
    border-left:1px solid #102C3C;
    border-right:1px solid #102C3C;
    text-decoration: none;
    display: block;
    text-indent: 25px;
    width: 165px;
}

.mpsubmenu li a{
    width: 165px;
    color: #BCCEE7;
    height: 27px;
    text-decoration: none;
    display:block;
    background:transparent url(../images/bgsubmenu.gif);
    padding:8 0 0 0px;
}

.mpsubmenu li a:hover{
    width: 165px;
    text-decoration: none;
    display:block;
    color: #BCCEE7;
    background:transparent url(../images/bgsubmenu2.gif);
    padding:8 0 0 0px;
}
.mpsubmenu li a:visited{
    width: 165px;
    color: #BCCEE7;
    height: 27px;
    text-decoration: none;
    display:block;
    padding:8 0 0 0px;
}

#mpdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: 37px;
    left: auto;
}

#mpdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
}[/SIZE]


Diesen CSS-Code habe ich nun an die Stelle des "Company" Menü-Buttons kopiert und alle "mp"s zu "mp1" umbenannt:


[SIZE=1]#mp1dropdown, #mp1dropdown ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#mp1dropdown li {
    float: left;
    position: relative;
}

.mp1menu{
    text-align: center;
    background:transparent url(../images/m_company.gif);
    height:38px;
}


.mp1menu a{
    display:block;
    width: 103px;
    height:38px;
}
.mp1menu a:hover{
    display:block;
    width: 103px;
    background:transparent url(../images/m_company2.gif);
}

.mp1submenu{
    display: none;
    width: 165px;
    position: absolute;
    top: 37px;
    left: 0px;
}

.mp1submenu li{
    font-size: 10px;
    text-transform: uppercase;
    text-align: left;
    height: 27px;
    border-bottom:1px solid #102C3C;
    border-left:1px solid #102C3C;
    border-right:1px solid #102C3C;
    text-decoration: none;
    display: block;
    text-indent: 25px;
    width: 165px;
}

.mp1submenu li a{
    width: 165px;
    color: #BCCEE7;
    height: 27px;
    text-decoration: none;
    display:block;
    background:transparent url(../images/bgsubmenu.gif);
    padding:8 0 0 0px;
}

.mp1submenu li a:hover{
    width: 165px;
    text-decoration: none;
    display:block;
    color: #BCCEE7;
    background:transparent url(../images/bgsubmenu2.gif);
    padding:8 0 0 0px;
}
.mp1submenu li a:visited{
    width: 165px;
    color: #BCCEE7;
    height: 27px;
    text-decoration: none;
    display:block;
    padding:8 0 0 0px;
}

#mp1dropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: 37px;
    left: auto;
}

#mp1dropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
}

Natürlich habe ich auch das Hintergrund-Image des Menu-Buttons und den Verweis im Coding der php-Datei umbenannt.
Trotzdem funktioniert der "Company"-Dropdown im IE leider nicht! :sad:

Wäre super, wenn jamand einen Tipp hätte!!

Vielen Dank!

Theresa

 

[neuroleptika]

Dem IE wird mit Javascript eine zusätzliche Klasse (over ) für alle <li>-Elemente innerhalb <ul id="mpdropdown"> bei onmouseover zugewiesen.

http://www.merchantportfolios.com/js/topmenu.js

document.getElementById("mpdropdown");

Für <ul id="mp1dropdown"> fehlt diese Funktion.

Eigentlich sollte so etwas für den IE7 nicht nötig sein und wird normalerweise nur für IE5-IE6 verwendet.
Hier scheint das anders gelöst zu sein.

 

[resi.eis]

Vielen Dank für die schnelle Antwort!
Leider kenne ich mich mit Javascript nicht aus und muss noch einmal nachhaken:

Ich muss also in der Datei "topmenu.js" die genannte Funktion noch definieren. Ich bin mir nicht ganz sicher, welchen Teil ich kopieren und abändern muss.

Hier der Codeabschnitt aus "topmenu.js":

startList = function() {
        if (document.all&&document.getElementById) {
            rpdropdownRoot = document.getElementById("mpdropdown");
            for (x=0; x<rpdropdownRoot.childNodes.length; x++) {
            node = rpdropdownRoot.childNodes[x];
            if (node.nodeName=="LI") {
            node.onmouseover=function() {
            this.className+=" over";
            }
            node.onmouseout=function() {
            this.className=this.className.replace(" over", "");
            }
            }
        }
    }
}

if (window.attachEvent)
    window.attachEvent("onload", startList)
else
    window.onload=startList;

Wärst Du so lieb und würdest mir den Code für mein "mp1dropdown" nennen? Damit wäre mir SEHR geholfen!!

Vielen Dank!

Theresa

 

[neuroleptika]

..
Leider kenne ich mich mit Javascript nicht aus ..

Ich leider auch nicht.
Aber so sollte es gehen.
Alles in topmenu.js damit überschreiben:

   startList = function() {
if (document.all&&document.getElementById) {
rpdropdownRoot = document.getElementById("mpdropdown");
for (x=0; x<rpdropdownRoot.childNodes.length; x++) {
node = rpdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

   startList2 = function() {
if (document.all&&document.getElementById) {
rpdropdownRoot = document.getElementById("mp1dropdown");
for (x=0; x<rpdropdownRoot.childNodes.length; x++) {
node = rpdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

if (window.attachEvent)
{
window.attachEvent("onload", startList)
window.attachEvent("onload", startList2)
}
else
{
//window.onload=startList; Auskommentiert (keine Ahnung wozu der else-Zweig dient).
}

Wenn noch mehr dropdown-Menüs hinzukommen wird das aber unübersichtlich. Dann frage besser noch mal in der javascript-Rubrik nach.
Wie bereits erwähnt, ist das auch nicht mein Ding.
Zumindest wird die Klasse over jetzt vom IE (und älteren Opera?) bei onmouseover eingesetzt.
Andere Browser brauchen diese Klasse nicht.

 

[Maxi]

@ resi.eis

Bitte verwende die Code-Tags, wenn du Codes im Forum postest.
Danke.

[noparse]

Hier der Code

[/noparse]