|
||||
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; } Code:
width:auto; 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}); }); }); } }); }); 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; } |
Sponsored Links |
|
|||
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> |
Sponsored Links |
|
|||
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" ... 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"
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. |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |