XHTMLforum - Falsches Anzeigen eines Suckerfish menüs im IE

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Falsches Anzeigen eines Suckerfish menüs im IE (http://xhtmlforum.de/showthread.php?t=53025)

Falsches Anzeigen eines Suckerfish menüs im IE

als erstes vielen dank füe eure bemühungen.

ich arbeite gerade an einer homepage für ein reisebüro. das CMS dafür basiert auf joomla.
Das Template zu dieser Seite habe ich komplett selber erstellt, dies beinhaltet die Index.php, zwei *.css dateien (eine für die page, eine für das suckerfish menü) eine javascript datei für das richtige anzeigen des suckerfish menüs im IE und einige bilder.

bei meinem problem handelt es sich um die richtige anzeige meiner programmierten *.css datei für das Suckerfish menü im Internet Explorer.
Im Firefox wird das gesamte Menü einwandfrei und problemlos dargestellt.

Ich habe dieses Script auch schon bei W3C Validieren lassen und es hat keine fehler gefunden.

Leider habe ich im Netz keine weitere hilfe zu meinem Proplem gefunden.

Meine Frage:
was muss ich an diesem CSS Ändern damit es auch im IE funktioniert?

Es geht um diese URL: Easy Travel & Services

Das ist der Code des Suckerfisch Menüs um den es sich warscheinlich handelt:

Code:

div.moduletable-jsm a.mainlevel:link,  div.moduletable-jsm a.mainlevel:visited {

border: 2px solid #6b8fb3;

-moz-border-radius: 5px;

-khtml-border-radius: 10px;

display: block;

line-height: 14px;

margin: 0 1px;

padding: 5px 0px 3px 0px;

background: #e6f2ff;

width: 100px;

height: auto;

text-align:center;

font-weight:bolder;

text-decoration:none;

}

*wenn ich

Code:

width:auto;

setze klappt das menü im IE problemlos auf. Was aber mein design völlig zeschiesst.

Das is das Java Script für das Suckerfish menü.

Code:

window.addEvent('domready', function() {



    var list = $$('div.moduletable-jsm li');



    list.each(function(element) {



        if ($(element).getElement('ul')) {



            el = $(element).getElement('ul')



            var fx = new Fx.Styles(el, {duration:200, wait:false, transition: Fx.Transitions.Expo.easeOut});



            el.setStyle('opacity', 0);



            element.addEvent('mouseenter', function(){



                fx.clearChain();



                fx.element.setStyle('left', 'auto');



                fx.start({'opacity': 1});



            });



            element.addEvent('mouseleave', function(){



                fx.clearChain();



                fx.start({'opacity': 0}).chain(function(){fx.element.setStyle('left', '-999em');});



            });



            var lista = $(el).getElements('li');



            lista.each(function(element) {



                element.setStyle('opacity', 0.8);



                var lifx = new Fx.Styles(element, {duration:500, wait:false, transition: Fx.Transitions.Expo.easeOut});



                element.addEvent('mouseenter', function(){



                    lifx.start({'opacity': 1});



                });



                element.addEvent('mouseleave', function(){



                    lifx.start({'opacity': 0.8});



                });                



            });            



        }     



    });



});

Das ist der gesamte Code des Suckerfish menüs:

Code:

/* ETS dropdown menu, Template - Daniel Pfisterer */



ul#mainlevel {

list-style: none;

padding: 0;

margin: 0;

font-size: 0.8em;

}



ul#mainlevel li {

list-style: none;

background-image: none;

padding: 0;

margin: 0;

}



div.moduletable-jsm {

float:left;

width:100%;

margin: 0;

margin-left:0px;

z-index: 10;

position: relative;

}



div.moduletable-jsm, div.moduletable-jsm ul {        

padding: 0;

margin: 0;

list-style: none;

line-height: 1;

}



div.moduletable-jsm a.mainlevel:link,  div.moduletable-jsm a.mainlevel:visited {

border: 2px solid #6b8fb3;

-moz-border-radius: 5px;

-khtml-border-radius: 10px;

display: block;

line-height: 14px;

margin: 0 1px;

padding: 5px 0px 3px 0px;

background: #e6f2ff;

width: 100px;

height: auto !important;

text-align:center;

font-weight:bolder;

text-decoration:none;

}



div.moduletable-jsm a.mainlevel:hover {        

background: #ffffff;

}



div.moduletable-jsm ul ul a:link, div.moduletable-jsm ul ul a:visited {

border: 2px solid #6b8fb3;

-moz-border-radius: 5px;

-khtml-border-radius: 10px;

display: block;

padding: 5px 0px 3px 0px;

background: #e6f2ff;

width:100px;

margin-top:-2px;

margin-left:1px;

text-align:center;

font-weight:bolder;

text-decoration:none;

}



div.moduletable-jsm ul ul a:hover {

background-color:#FFFFFF;

}



div.moduletable-jsm li {

float: left; 

padding: 0; margin: 0;

}



div.moduletable-jsm li ul {

margin:0; 

padding: 0px;

position: absolute;

left: -999em;

z-index: -10;

width:100px;

text-indent: 0px;

}



div.moduletable-jsm li:hover ul, div.moduletable-jsm  li {

left: auto;

}



.moduletable {

clear: both;

}

Ich würde mich über eure hilfe freuen. Vielen Dank

Code:

  <script type="text/javascript" src="/media/system/js/mootools.js"></script>

 ...

<!-- System CSS -->

...

<!-- CSS Einbinden -->

...

<script type="text/javascript" language="JavaScript" src="/includes/js/mootools.js"></script>



<script type="text/javascript" language="JavaScript" src="/templates/ets/js/jsm.js"></script>

wenn ich das 2. mootools auskommentiere, dann erscheint das Menü im IE6 wenigstens. Hmm. Im IE6 schiebt es das Folgende nach unten.

ja vielen dank, das war wohl die lösung für das problem zumindest für den IE7, mit dem funktionert das jetzt einwandfrei. klappt denn das Menü im IE6 vernünftig auf? so das man die links in den buttoms normal anklicken kann? Wenn nicht muss ich Vielleicht an der Mootool.js noch etwas modifizieren.

also der IE zerauft mir manchmal ganz schön die Haare... habe auch noch runde ecken eingefügt aber die erkennt der IE Natürlich auch nicht :(

header der index.php sieht jetzt so aus!

Code:

<!-- System CSS -->



<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />



<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />







<!-- CSS Einbinden -->



<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ets/css/template.css" type="text/css" />



<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ets/css/jsm.css" type="text/css" />







<!--<script type="text/javascript" language="JavaScript" src="<?php echo $mosConfig_live_site;?>/includes/js/mootools.js"></script>-->



<script type="text/javascript" language="JavaScript" src="<?php echo $mosConfig_live_site;?>/templates/ets/js/jsm.js"></script>

Im IE6 schob das ausklappende Menü den Rest der Seite vor sich her; nicht gut. Aber das war mein Stand von vorhin, jetzt schläft die VM schon mit meinem IE6.

Runde Ecken? Allgemein zum IE: Eine Seite muss nicht in allen Browsern gleich aussehen. Sie sollte in den von deinen Nutzern verwendeten Browsern ihre Funktion beibehalten.

also ich hatte zwischen durch an dem css gearbeitet und einiges ausprobiert... bis du mir deine lösung geschickt hattest. also mit dem ie7 funktioniert das alles jetzt einwandfrei bis auf die runden ecken. ;)

naja das problem ist das die meisten leute die kaum ahnung haben sich nen laptop kaufen und dann lediglich mit dem IE ins netz gehen und daher liegt der IE marktbereich ja auch bei knapppen 48%. daher ist der IE beim homepage schreiben nicht so einfach ausser betracht zu ziehen, würd am liebsten auf die startseite schreiben "Optimiert für Firefox" :lol:...

aber danke auf jedenfall für deinen tip werde jetzt mal die alten IE s installieren.

Ich hatte nicht angeregt, den IE6 außer Betracht zu ziehen. Ich hatte gesagt, dass eine Seite nicht in allen Browsern gleich aussehen muss, sondern schlicht funktionieren sollte. Und das nach längerer Beschäftigung mit IE-Workarounds. Es ist nicht wichtig, ob die Ecken im IE6 auch rund sind, solange das Menü an sich benutzbar ist.

ja is richtig, ich sehe das ja genau so, wollte damit nur sagen wenn mein Kunde will das auf seiner homepage runde buttoms sind und er leider nur den IE benutzt kann ich leider schlecht sagen "installieren sie sich mal den firefox da wird es venünftig angezeigt" :lol:

naja da werde ich dann nicht drum herum kommen auf eine grafische lösung zurück zugreifen...

Das Problem der IE6-Workarounds ist, dass sie oft kurz vor Deadline aus Foren und von Hilfeseiten geholt werden. Die veranschlagte Zeit ist dann aber schon dahingetickt, den Workaround gibt es also umsonst für den Kunden.

Es ist eine unrichtige Annahme, eine Seite müsse nun einmal in allen Browsern gleich aussehen, der Kunde wolle das so. Wenn der Kunde das wirklich will, dann soll er es wirklich bezahlen. Inklusive sollte nur die Funktion der Seite im IE6 sein. Soll es auch im IE6 so aussehen wie in anderen Browsern, sollte dem Kunden das mit einem angemessenen Aufschlag angeboten werden, der die tatsächlich aufzubringende Zeit (deine und meine in diesem Fall) berücksichtigt.

Müssten die Kunden die IE6-Workarounds bezahlen auf der Welt, wäre das Problem der weiteren Unterstützung des IE6 bald erledigt, weil unwirtschaftlich.