Thema: Menüanzeigefehler

Hallo Community,

ich habe ein Problem, unzwar wird mein Superfish Menu nur im Internet Explorer korrekt angezeigt. In allen anderen Browsern wir Firefox, Chrome, etc wird es falsch dargestellt, denn es fängt an der Position header an und liegt dann unter der Position home. Ich habe dort alle Reihenfolgen ausprobiert. Auch alle anderen Positionen im Template. Kann es irgendwie daran liegen, dass man die Positions irgendwie in einer anderen Reihenfolge "übereinanderlegen" muss, so wie auf einer Z-Achse? Hier ein paar Daten zur Übersicht:

Joomla v1.5.9
PHP v5.2.9-1
MySQL 5.1.32
IIS v6
Template: JSN_Epic_Free v2.0
Menu: Superfish (Version für Joomla 1.5)

Hier noch 2 Screenshots zum Vergleich, die Menüpunkte habe ich mal geschwärzt:

Firefox, Chrome, etc. (funktioniert nicht)


Internet Explorer (funktioniert)


Würde mich über jede Hilfe freuen!
Gruß,
Apple

wieso benutzt du nicht das schon in JSN eingebaute suckerfish menue??
setze in deiner CSS das superfish menu auf z-index: 99;

gruss ronny

@ronny: ich habe nichts von einem bereits implementierten menu im JSN gewusst. Ich muss darauf hinweisen, dass es die FREE Version ist. Änderungen in der CSS haben auch nichts bewirkt. Auszug:

PHP-Code:

/** @SUCKERFISH **/

/* Mainlevel */
ul.menu-suckerfish {
    z-index: 99;
    float: left;
    border-right: 1px solid #404040;
    margin: 0;
    background: none;
    padding: 0;
    list-style: none;
}

ul.menu-suckerfish li {
    float: left;
    display: inline;
    background: none;
    margin: 0;
    padding: 0;
}

ul.menu-suckerfish a:link,
ul.menu-suckerfish a:visited {
    display: block;
    border-right: 1px solid #000000;
    border-left: 1px solid #404040;
    margin: 0;
    padding: 3px 1.5em;
    color: #ffffff;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
}

ul.menu-suckerfish a:hover {
    background-color: #404040;
}

ul.menu-suckerfish li.active a {
    background-color: #404040;
}


/* Sublevel */
ul.menu-suckerfish ul {
    position: absolute;
    left: -999em;
    z-index: 99;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Other containers */
ul.menu-suckerfish ul ul {
    margin: -26px 0 0 184px;
    z-index: 99;
}

/* Items */
ul.menu-suckerfish ul li {
    position: relative;
    width: 185px;
    margin: 0;
    background: none;
    padding: 0;
}

ul.menu-suckerfish ul a:link,
ul.menu-suckerfish ul a:visited {
    display: block;
    border-top: 1px solid #366999;
    border-right: none;
    border-bottom: 1px solid #162c40;
    border-left: 1px solid #162c40;
    background: #284d73 none;
    color: #cfdbe5;
    padding: 4px 10px;
    font-size: 0.9em;
    font-weight: normal;
    text-decoration: none;
    height: 1%;
}

ul.menu-suckerfish ul a:hover,
ul.menu-suckerfish ul li.parent a:hover,
ul.menu-suckerfish ul li.parent li.parent a:hover {
    border-top: 1px solid #1f3d59;
    background-color: #1f3d59;
    color: #ffffff;
}

/* Active */
ul.menu-suckerfish ul li.active a,
ul.menu-suckerfish ul li.active li.active a,
ul.menu-suckerfish ul li.active li.active li.active a {
    font-weight: bold;
    color: #ffffff;
}

/* Clear active */
ul.menu-suckerfish ul li.active li a,
ul.menu-suckerfish ul li.active li.active li a {
    font-weight: normal;
    color: #cfdbe5;
}

/* Children expanded */
ul.menu-suckerfish ul li.parent a,
ul.menu-suckerfish ul li.parent li.parent a {
    background: #284d73 url("../images/suckerfish-expand.png") no-repeat 95% center;
    padding-right: 10px;
}

/* Clear children expanded */
ul.menu-suckerfish ul li.parent li a,
ul.menu-suckerfish ul li.parent li.parent li a {
    background-image: none;
}


/* Rollover actions */
ul.menu-suckerfish li:hover ul,
ul.menu-suckerfish li.hover ul,
ul.menu-suckerfish li:hover ul li:hover ul,
ul.menu-suckerfish li.hover ul li.hover ul,
ul.menu-suckerfish li:hover ul li:hover ul li:hover ul,
ul.menu-suckerfish li.hover ul li.hover ul li.hover ul {
    left: auto;
}

ul.menu-suckerfish li:hover ul ul,
ul.menu-suckerfish li.hover ul ul,
ul.menu-suckerfish li:hover ul li:hover ul ul,
ul.menu-suckerfish li.hover ul li.hover ul ul,
ul.menu-suckerfish li:hover ul li:hover ul li:hover ul ul,
ul.menu-suckerfish li.hover ul li.hover ul li.hover ul ul {
    left: -999em;
}

ul.menu-suckerfish,
ul.menu-suckerfish li li {
    clear: left;
}


/** @BULLET TREE **/

/* main level */
ul.menu-bullettree,
ul.menu-bullettree ul {
    background: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.menu-bullettree li {
    background: none;
    padding: 0;
    margin: 0;
}

ul.menu-bullettree {
    border-top: 1px dotted #b3b3b3;
}

ul.menu-bullettree ul li {
    margin-left: 1em;
}

ul.menu-bullettree a:link, ul.menu-bullettree a:visited {
    display: block;
    background: transparent url(../images/bullettree-level0.png) no-repeat 5px 10px;
    border-bottom: 1px dotted #b3b3b3;
    padding: 3px 5px 3px 15px;
    color: #404040;
    text-decoration: none !important;
}

ul.menu-bullettree a:hover {
    background-color: #d9d9d9;
    color: #000000;
}

/* For dark background */
div.box-grey ul.menu-bullettree a:link,
div.box-grey ul.menu-bullettree a:visited {
    color: #d9d9d9;
}

div.box-grey ul.menu-bullettree a:hover {
    background-color: #404040;
    color: #d9d9d9;
}

/* Sublevel items */
ul.menu-bullettree ul a:link,
ul.menu-bullettree ul a:visited {
    background-image: url(../images/bullettree-level1.png);
    border-bottom: none;
}

ul.menu-bullettree ul ul a:link,
ul.menu-bullettree ul ul a:visited {
    background-image: url(../images/bullettree-level2.png);
}

ul.menu-bullettree ul ul ul a:link,
ul.menu-bullettree ul ul ul a:visited {
    background-image: url(../images/bullettree-level3.png);
}

/* Current item */
ul.menu-bullettree a.current {
    background-image: url(../images/bullettree-current.png) !important;
    font-weight: bold;
    color: #000000;
}

ul.menu-bullettree li.current a:hover {
    color: #000000;
}

div.box-grey ul.menu-bullettree li.current a {
    color: #ffffff;
}

div.box-grey ul.menu-bullettree li.current a:hover {
    color: #ffffff;
}

ul.menu-bullettree li.current li a {
    font-weight: normal;
}

ul.menu-bullettree li.current li a:hover {
    color: #000000;
} 


@xbq: hab das mit einem anderen template ausprobiert (rhuk_milkyway), genau das selbe problem, wenn ich mir das template mit "?tp=1" anschaue liegt Position top unter user3.


In der Index.php des Templates habe ich folgendes in den Headbereich hinzugefügt:

PHP-Code:

<?php
if(file_exists($mosConfig_absolute_path."/modules/mod_superfishmenu/tmpl/css/superfish.css")){
?>
    <link href="<?php echo $mosConfig_live_site; ?>/modules/mod_superfishmenu/tmpl/css/superfish.css" rel="stylesheet" type="text/css"/>
<?php
}
?>

Bin mit meinen Ideen auch so langsam an Ende, hab ich evtl noch irgendwas übersehen oder an der falschen Stelle geändert? Vielen Dank schonmal für die Antworten!

Gruß,
Apple

ist auch in der freeversion du gibst in deinem menue module die position toolbar ein
und rechts unter parameter (erweiterteparameter)
Menü-Klassen-Suffix -suckerfish
Module-Klassen-Suffix _menu

gruss ronny

im prinzip ist im firefox die position toolbar über der position header und im IE ist es nun umgekehrt...

hast du einen link zur seite, ich hatte noch nie ein problem mit dem template, und setze es oft ein, wenn du etwas an der index.php geaendert hast, das koennte der grund sein, dann vielleicht deinstallieren und nochmal neu hochladen

gruss ronny

also das template hatte ich eben nochmal neu aufgesetzt nachdem ich das menumodul deinstalliert hatte um das JSN eigene Menu zu verwenden. Den Link darf ich nicht rausgeben, da mein Ausbilder da was gegen hat, deshalb muss ich mir hier die Arbeit mit den Screenshots machen :/ Also ich hab mal 2 Screenshots zum Vergleich angehängt:

Firefox/Opera/Chrome:


Internet Explorer:


Die Bilder im Header ist das Modul "SlideShowPro". Befindet sich an der Position header. Das Menu an der Position toolbar. Da sollen sich später Bilder mit der größe 800x150 im Fade-In - Fade-Out Effekt ändern und die Seite abwechslungsreicher machen.

Achja das Template JSN Epic hat 3 CSS-Dateien. 2 Davon sind einmal für IE6 und IE7, da muss man nichts anpassen, damit das im IE läuft oder?

Gruß,
Apple

da hast du glueck gehabt das ich das noch alles auf meiner testumgebung drauf hatte
sonst ohne link ist das schwierig
#jsn-mainmenu {template.css (line 51)
background-color:#282828;
height:30px;
position:relative;
z-index:99; diese zeile so aendern und */ aus der zeile loeschen

gruss ronny