zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Falsches Anzeigen eines Suckerfish menüs im IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.08.2008, 11:33
Benutzerbild von PuriX
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2008
Ort: Berlin
Beiträge: 4
PuriX befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.08.2008, 21:53
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.08.2008, 23:13
Benutzerbild von PuriX
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2008
Ort: Berlin
Beiträge: 4
PuriX befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #4 (permalink)  
Alt 05.08.2008, 23:20
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #5 (permalink)  
Alt 05.08.2008, 23:39
Benutzerbild von PuriX
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2008
Ort: Berlin
Beiträge: 4
PuriX befindet sich auf einem aufstrebenden Ast
Standard

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" ...

aber danke auf jedenfall für deinen tip werde jetzt mal die alten IE s installieren.
Mit Zitat antworten
  #6 (permalink)  
Alt 05.08.2008, 23:59
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #7 (permalink)  
Alt 06.08.2008, 00:13
Benutzerbild von PuriX
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2008
Ort: Berlin
Beiträge: 4
PuriX befindet sich auf einem aufstrebenden Ast
Standard

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"

naja da werde ich dann nicht drum herum kommen auf eine grafische lösung zurück zugreifen...
Mit Zitat antworten
  #8 (permalink)  
Alt 06.08.2008, 00:42
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Daten aus externer XML Datei auslesen und anzeigen....... RedBaron2104 (X)HTML 6 10.06.2011 15:36
Aufklappbare Menüs, Ansicht Firefox & IE FuXXz CSS 1 15.11.2008 16:19
Fly out Menu - mit Peterned´s csshover.htc oder Suckerfish JavaScript? Chico_wau CSS 2 07.07.2008 23:01
[JavaScript] Suckerfish etwas anders gebraucht. // error dayscott Javascript & Ajax 5 07.08.2007 12:22
bildinformationen bei klick anzeigen (tooltip) FrashMan CSS 3 03.04.2007 14:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:42 Uhr.