IE7 und Darstellung Suckerfish Menu

[Maik]

Hallo zusammen,

habe das Problem, dass mein Suckerfish Menu in IE8 unf FF 3.5.5 funktioniert, in IE7 auch ABER: das Dropdown Menu schiebt sich hinter die Schrift des #main Containers ...

Link: http://www.mangold-energy.de

Kann mir da jemand unter die Arme greifen?

Besten Dank ...

[MacKP]

Hallo Maik,
gib dem ul mal einen hohen z-index.
Und dann dem #container einen niedrigen.

Ist jetzt nicht getestet... aber die Schwierigkeit ist immer, das man dem direkt Umschließenden Element die z-index Werte verpassen muss, damit der IE6 das auch noch rafft.

Viele Grüße

[Maik]

Hallo MacKP, habe ich versucht ... leider ohne Erfolg ... ich werd´ noch kirre ...

[Andreas]

Hallo Maik,

vergleich doch mal bitte mit dem suckerfish von mir in CSS-Dateien in TL - Wo Wie Warum Ist eigentlich dafür gedacht, dass man es für TL nicht immer wieder neu erfinden muss. Sollte eigentlich zur Standard-Installation passen, hat mich immerhin ein paar Stunden gekostet.

Andreas

[Maik]

Hallo Andreas, ich komme da einfach nicht klar - wenn ich Deine Lösung als Grundlage nehme, klappts irgendwie auch nicht ... es ist schon Wahnsinn, was so ein "olles" Dropdown Menu einem abverlangt ...

Kann mir sonst keiner helfen? Es geht in erster Linie um den IE7, der mir mit der Schrift im Main Container das Leben schwer macht, sprich die Schrift ist VOR dem ausgeklappten Menu ...

Vom IE6 bin ich wahrscheinlich noch meilenweit entfernt.

*Hülfe ?!?*

[Thomas]

Hallo!

Die einfachste Lösung währe eine Teaser-Lösung, indem Du einen eigenen DIV-Bereich zwischen Header und Container setzt und dort mit einem eigenen Layoutbereich arbeitest..

Und dort dann den z-index anwendest.

Ich habe mir nicht die Mühe machen wollen und nach einer Lösung im Header zu suchen, so gings schneller und einfacher.

Generell vermute ich ein einfaches Reihenfolgen-Problem in den CSS-Anweisungen.

[Maik]

Hi Thomas, danke für Deine Antwort ... ich habe die Navigation bereits in einem eigenen Layoutbereich (#navi). Dieser ist nur eben genauso gross, wie die (eingeklapppte) Navigation. Zur Reihenfolge: meinst Du die Reihenfolge der CSS-ANweisungen im Navigations-Sheet ?

Beste Grüsse

Maik

[Thomas]

Wie erwähnt, ich habe danach nicht wirklich gesucht, ist nur eine Vermutung.

Du hast sicherlich das Menü in einem eigenen Bereich.
Ich meinte ja auch, dass Du im Template einfach mal zwischen <div id="header">...</div> und <div id="container">...</div> einen eigenen DIV-Container einfügst und dort den eigenen Bereich einfügst.

Z.B. so:

<div id="header">...</div>
<div id="teaser">
        <!-- suckerfish Menü -->
        <?php echo $this->sections['suckerfish']; ?>
</div>
<div id="container">...</div>
...

[Andreas]

Hallo Maik,

nachdem ich jetzt nochmal stundenlang rumprobiert habe, kann ich nur sagen es funktioniert. Und jetzt sehe ich, dass du es geschafft hast. Ich kann natürlich nur für den TL-Standard entwickeln. Besonders bei sonem Dropdown-Menü. Das ist echt knifflig, da kommt es auf jede Kleinigkeit an. Wenn du sowas aus der Bauklotzschublade holst und es funktioniert nicht, musst du dich natürlich Schritt für Schritt wieder rückwärts an das original TL annähern, bis der Fehler behoben ist. Erst dann kannst du deinen Code wieder aufbauen und Modifizierungen vornehmen um den Fehler auszugleichen. Bei soner Fehlersuche ist natürlich immer Kreativität gefragt, CSS-Dateien durch Umbenennen kompl. deaktivieren, mal auf das standard Seitentemplate umschalten usw. Na ja, fürs nächste Mal.

Übrigens würde ich die slimbox.css als letztes einbinden, das ist sone standalone CSS, wenn die ganz am Anfang ist könnte die vielleicht auch mal aus Versehen überschrieben werden und dann funzt die Großansicht nicht mehr. Ansonsten hast du die Reihenfolge gut gewählt. Musst natürlich aufpassen, dass du die typolight.css und die iefixes.css nicht überschreibst.

Andreas

[Thomas]

Hallo Andreas und Maik!

Ich habe das selbe Problem auch unter YAML gehabt und genauso gelöst.
YAML bringt von Haus den Teaser mit, wenn man ihn aktiviert und das hat mich darauf gebracht.

Schön das es funktioniert.

Diese Suckerfish Dinger sind von je her knifflig gewesen und es gibt auch da keine Allerheil-Lösung, da jedes System anders aufgebaut ist.

Da aber viele Suckerfish horizontal oder vertikal verwenden wollen, währe es da nicht angebracht ein Modul zu schreiben?

Ich kann es selber nicht, sonst würde ich mich da selber ran setzen, aber vielleicht findet sich ja Jemand der sich bereit erklärt.

[Andreas]

Da aber viele Suckerfish horizontal oder vertikal verwenden wollen, währe es da nicht angebracht ein Modul zu schreiben?

Hallo Thomas,

bringt ja nix, ist doch alles da. Ist doch nur ne Liste, die mit dem Navigationsmodul gerendert wird. Es geht ja nur um CSS. Und dafür habe ich ja die suckerfish_h.css geschrieben, die ja auch beim default Seitentemplate browserübergreifend funktioniert. Man muss halt nur Obacht geben, sobald man etwas gravierendes verändert. Z.B. eingene Layoutbereiche, oder es gibt Konflikte mit anderen CSS. Liegt eben daran, das die Umsetzungen eben doch sehr individuell sind, und das ist ja auch gut. Es hält eben sehr genau damit.

Andreas

[Thomas]

Hmmm, da ich gerade einmal eine Seite ohne YAML umsetzen möchte, schaue ich mir Dein Tut doch mal etwas genauer an.

Bis dato habe ich mir alles soweit selber hingestrickt, vlt. nicht immer sauber, dafür funktionel.

Ich fange heute damit an, daher etwas gemach.

[Maik]

Hallo Andreas,

mein IETester zeigt mir den Fehler immer noch an - ich habe derzeit keinen Zugriff auf einen "echten" IE7. Ist der Fehler wirklich weg? In meinem IETester legt sich das ausgeklappte Menü immer noch hinter den Text der #Main Bereichs ...

[Andreas]

Hallo Maik,

du kannst den IE8 installieren und mit ihm den IE7 simulieren.

Aber ich hab jetzt gesehen, dass im IE7 tatsächlich die Schrift vom unterliegenden DIV durchscheint. Der Background vom unterliegenden DIV wird durch eine suckerfish Hintergrundfarbe oder Bild abgedeckt, aber die Schrift nicht!??? Sehr seltsam, die Schrift drückt sich durch den Hintergrund und selbst durch Hintergrundbilder. Ich werde also erstmal aus meinem Tutorial die IE7 Kompatibilität rausnehmen müssen, da ich es im Moment auch nicht hin bekomme. Ich habe diese Nacht schon stundenlang probiert und werde mich jetzt nochmal dransetzen. Ist mir ein bisschen peinlich, da ich mir wirklich sicher war mit allen angegebenen Browsern sehr penibel getestet zu haben und gerade auch darauf geachtet hatte, dass das SF über allem anderen liegt und nichts durchscheint.

Mal sehn, auf der original SF-Seite http://htmldog.com/articles/suckerfi...le/bones1.html geht's ja auch mit dem IE7, aber die hamms ja leicht, da ist der Content direkt linear hinter der Liste und bei uns ist nicht nur die Liste in mehreren verschachtelten DIVs, sondern auch der Content und der auch noch gefloatet. Vielleicht finde ich eine Lösung, bei der die Liste auch unmittelbar vor dem Content kommt.

Andreas

[Andreas]

Hallo Maik,

für deine Situation im IE7 habe ich jetzt eine Lösung gefunden.
#Kopf-Navi .inside { position: static; }
Die position wird von typolight.css auf 'relative' gesetzt. Das darf nicht. Was die Änderung in 'static' jetzt für Auswirkungen auf den Rest des Layouts hat, bzw. in anderen Browsern bewirkt, weiß ich nicht. Kannst sie ja zur Sicherheit über ein CC einbinden, und dann mal dein Layout checken.

Für standard TL-Situationen könnte:
#header .inside { position: static; }
diesen Bug beheben, wenn das suckerfish im Header eingebunden wird. Muss ich aber erst noch in mehreren Situationen testen. Etwas Geduld bitte.

Andreas

[Thomas]

Allternativ kannst Du Dir mal mein Menü ansehen!

Die CSS-Anweisungen sind sicherlich an der ein oder anderen Stelle etwas konfus und noch nicht optimiert, aber es funktioniert vorerst.

http://visselkicker.the-stabs.info/

Die Anweisungen für Suckerfish findest Du in der basemod.css.

Werde das bei Zeiten nochmal überarbeiten.

[Andreas]

So, jetzt geht's und ist alles ausgiebig getestet. Nähere Infos dazu im Tutorial.
CSS-Dateien in TL - Wo Wie Warum
Andreas

[Maik]

Hallo Andreas,

also zunächst einmal braucht Dir nichts peinlich zu sein - denn Du tust es ja freiwillig und Deine Arbeit ist für alle sehr wertvoll (vor allem im Moment für mich). Dann möchte ich Dir ein Riesen Dankeschön aussprechen - der IE7 macht nun endlich mit! Für Deine Hilfe und Deinen unermüdlichen Einsatz in dieser Sache nochmals vielen Dank. Jetzt kann es weiter in Richtung IE6 gehen, der die Navi (noch) nicht aufklappen lässt.

TOP Arbeit, TOP Leute und TOP CMS !! Was will das Herz noch mehr?

Ich hoffe, ich kann Dir bei Gelegenheit mal was Gutes tun ...

Beste und erleichterte Grüsse

Maik

@Thomas: Auch Dir vielen Dank für den "Spickzettel".

[Andreas]

Hallo Maik,

erstmal danke für die moralische Unterstützung .

Es sieht so aus, als hättest du einige Klassen '.sfhover' vergessen. Du musst jeden Selektor, der die Pseudoklasse :hover besitzt mit einem Selektor doppeln, der die Klasse .sfhover besitzt. Beispiel:
li:hover { Eigenschaft:Wert }
li.sfhover { Eigenschaft:Wert }
oder kurz:
li:hover, li.sfhover { Eigenschaft:Wert }
Schau in meine suckerfish_h.css.

Die Klassen 'sfhover' werden über das Javascript für alle IE<=7 in den HTML-Code generiert. Das ist übrigens der Trick bei der Sache für die alten IEs, weil diese Browser Pseudoklassen wie :hover nur für A-Elemente verstehen. Schau dir den JS-Code an, dort kannst du an zwei Sellen sehen, wo 'sfhover' generiert wird. 'sfHover' hingegen ist der Name der Funktion.

Jetzt hast du natürlich schon viel gecodet, aber am besten wäre es, wenn du meine CSS als Ausgang genommen hättest, und erst wenn das funktioniert, Stück für Stück deine Formatierung aufsetzen würdest.

Gruß Andreas

[Thomas]

Hallo, Andreas!

Meinst Du nicht, es wäre besser, wenn man dieses Tutorial in die Sparten CSS-Dateien und Suckerfish unterteilt?

Für einen Anfänger ist es recht schwer nach zu vollziehen, denke ich.

Eine Aufnahme ins Wiki würde ich auch begrüßen, da das vorhandene Tut für Suckerfish zur korrekten Funktion noch in den Ebenen angepaßt werden muß und Deines mir doch ausgereifter erscheint.

@Maik
Keine Ursache.

[Andreas]

Hallo Thomas,

ich finde von der Größe her geht es gerade noch so. Ich bin ein Freund davon, dass man das, was zusammengehört an einem Platz findet Wenn es eine Rubrik wie z.B. 'alles rund um CSS in TYPOlight' geben würde, dann würde ich evtl. mehrere Teile daraus machen, aber dann hätte man wieder viele Querverweise. Irgendwie gehört alles zusammen.

Ich hab gehört das Wiki macht, oder ist, dicht. Ich such mal nach dem von dir erwähnten Tut für Suckerfish, ich kenn das noch gar nicht.

Andreas

[Maik]

Hallo Andreas,

look: http://de.contaowiki.org/typolight/TutorialsSuckerfish

[Andreas]

ja, hatte ich schon gefunden und gelesen. Ist etwas alt.

Meld dich mal, wenn dein SF in IE5.5 und 6 funktioniert.

Andreas

[Maik]

...funktioniert ... *fast*

Habe ein paar Klassen verteilt (Du hattest natürlich recht) - habe aber ein lustiges Verhalten: im IE 6 bringt er mir das Dropdown immer zwei Punkte nebeneinander und bricht erst dann um ...

Screenshot folgt ...

[Andreas]

Hallo Maik,

versuch mal deinen Suckerfish-Kram gegen das hier auszutauschen. Ich bin von meinem ausgegangen, hab in etwa dein Design aufgelegt und entschlackt.

#suckerfish {
  position: static;
  width: auto;
  background: #0b3e8c url(tl_files/Layout/nav.png) repeat-x left center;
}
#suckerfish ul,
#suckerfish li,
#suckerfish .submenu {
  margin: 0;
}
* html #suckerfish { zoom: 0; }
* html #suckerfish { z\oom: 1; }
#Kopf-Navi .inside {
  position: static;
}
#suckerfish li li {
  background: #0b3e8c;
}
#suckerfish ul {
  z-index: 9999;
  padding: 0;
  margin: 0;
  list-style: none;
}
#suckerfish li ul ul {
  margin: -30px 0 0 250px; /* height 0 0 width */
}
#suckerfish a,
#suckerfish span {
  display: block;
  text-align: center;
  padding: 0 10px;
  border-right: 1px solid #1960e3;
  border-bottom: 1px solid #1960e3;
  width: 229px; /* width minus padding minus border */
  line-height: 29px; /* height minus border */
  font-size: 13px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
#suckerfish a:hover {
  background: #525252 url(tl_files/Layout/nav_hover.png) repeat-x left center;
}
#suckerfish li li a,
#suckerfish li li span {
  text-align: left;
}
#suckerfish span,
#suckerfish a.trail {
  color: #ff0;
}
#suckerfish li {
  float: left;
  width: 250px; /* width */
}
#suckerfish li ul {
  position: absolute;
  width: 250px; /* width */
  left: auto; /* change to -999em */
}

/** * up to 4 levels */
#suckerfish ul.level_1 li:hover ul ul,
#suckerfish ul.level_1 li.sfhover ul ul,
#suckerfish ul.level_1 li:hover ul ul ul,
#suckerfish ul.level_1 li.sfhover ul ul ul {
  left: auto; /* change to -999em */
}
#suckerfish ul.level_1 li:hover ul,
#suckerfish ul.level_1 li.sfhover ul,
#suckerfish ul.level_1 li li:hover ul,
#suckerfish ul.level_1 li li.sfhover ul,
#suckerfish ul.level_1 li li li:hover ul,
#suckerfish ul.level_1 li li li.sfhover ul {
  left: auto;
}

Andreas

[Maik]

Hi Andreas, Dein unermüdlicher Einastz macht mir Angst

Habe Dein CSS integriert ... Ergebnis:

Die Untermenüs sind ohne Aktion ausgeklappt ....

[Andreas]

Ne, das war jetzt auch mein letzter großer Einsatz in dieser Richtung.

Ja klar, guck einfach mal in die CSS Datei, hab ich dir da reingeschrieben, sind zwei Werte die du ändern musst. War nur zum direkten Ansehen so eingestellt.

change to -999em

Andreas

[Maik]

Hallo Andreas,

ich habe heute mittag mal etwas damit herumgespielt, mit dem Ergebnis, dass es funktioniert! An der Gestaltung muss ich noch etwas basteln, denn ich hätte es gerne wie in meinem (momentan wieder aktiv geschaltenen) Menu, dass das Pulldown-Menu etwas grösser ist als das Hauptmenu oben drüber.

Ansonsten klappt das einwandfrei jetzt, das muss Dir der Neid lassen.

Sollte mir noch etwas auffallen, so melde ich mich dann dazu - wahrscheinlich im Laufe des Abends.

Besten Dank nochmals ... ich hatte gelesen, dass Du gar kein Dropdown in Benutzung hast - was hat Dich nur dazu gebracht, dies zu ermöglichen? Die Herausforderung?

Jedenfalls super Sache!

[Andreas]

Na also

Ja, war ne Herausforderung. Wenn ich's selber brauche, ist's halt schon fertig.

Andreas

[Andreas]

Hallo, ich bins nochmal

Ich konnte gestern ja nur mit FF testen. Jetzt wo du's online hast hab ich mal schnell nachgesehen. In Ordnung sind FF, IE8, IE7, IE5.5 und Opera. IE6 hat wieder das Verhalten, dass er nach 2 Items untereinander die nächsten wieder rechts oben anfängt. Im Safari klappt nichts auf. Vielleicht probierst du mal erst mit meinem Code, ohne ihn zu verändern, und wenn das auch nicht geht, dann schau mal inwieweit ich selber von meiner Vorlage suckerfish_h.css abgewischen bin, denn die Vorlage funktionierte auf jeden Fall in einer standard TL-Installation. Musst du halt mal schauen, kann ja nicht viel sein. Für den IE6 würd ich's sogar so lassen, solange alle Menüpunkte erreichbar sind.

Andreas

[Maik]

Hallo Andreas, ich habs nochmal umgeschalten ... das ist jetzt Dein Code, den Du gepostet hast ...

[Andreas]

Ja, das funzt jetzt in allen Browsern. IE5.5 sieht zwar ein wenig schrottig aus, dürfte man aber mit leben können. Du musst dir unbedingt den IETester installieren, und auch den Safari und den Opera. Um dich jetzt deinem Design zu nähern musst du halt Schritt für Schritt vorgehen und immer wieder kontrollieren.

Andreas

[Maik]

Den IETester habe ich, auch die genannten Browser ... der IETester ist m.E. aber etwas instabil (schmiert mir immer wieder mal ab). Habe XP in der Virtualbox am Laufen, um den IE6 zu testen ... jedenfalls - und das ist erst mal das Wichtigste - scheint die Sache so langam rund zu laufen.

[tgr]

Wow, ich habe eine eigene CSS erstellt, darn nur der Eintrag

#header .inside { position: static; }

und es funzt.

Besten Dank.
Thorsten

[Pellinger]

Hallo in die Runde, Hallo Andreas,

da hänge ich mich doch mal hier in die Diskussion an.

Im IE7 habe ich das Problem, dass das "mouse-out" bei den eingeblendeten Buttons nicht funzt. FF, IE8, IE6 kein Problem.
Das Problem existiert wenn irgendein content unterhalb der eingeblendeten Buttons existiert - auch egal ob suckerfish im header oder im gleichen Layoutbereich liegt.
Ist auch in Andreas Original-sf-Datei, wobei ich die xbasics noch unberührt ließ.
Auch diverse z-index Versuche brachten leider kein Ergebnis...

Merci & Grüße in die Runde

[Andreas]

Hallo,

das hab ich ja in der suckerfish_h_readme.txt erwähnt

...einzig IE7 zeigt ein seltsames Verhalten,...

Ihr könnt aber mal versuchen unter der Eigenschaft 'left' nur für den IE7 die Eigenschaft 'display' zu ergänzen.

...
left: -999em; /** * change to 'auto' for testing */
display: none;
...
left: auto;
display: block;
...

Andreas

[Maik]

hi, bei mir war es damals - wenn ich mich recht erinnere display; static; für das umschliessende Element der Navigation ... schon versucht?

[Pellinger]

Andreas, ich bekenne mich schuldig. Wer lesen kann ist klar im Vorteil!
Und wer "readme"s liest sowieso. Grumpf.

Danke!

jepp und position:static ist bei dem Dingen quasi die halbe Miete (der Rest stand in dem readme-file)

[Andreas]

Hi Pellinger (sorry, mein Namensgedächtnis lässt mich im Stich),

das mit position:static; kann doch irgendwie nicht die Lösung sein, da diese Eigenschaft für die Selektoren #suckerfish und #header .inside, bereits in der suckerfish_h.css gesetzt sind. Da muss irgendetwas anderes die Lösung für IE7 gebracht haben.

Andreas

[Pellinger]

Hallo Andreas,

nee, Du hattes vollkommen recht. Es war das display block.
Das mit der position:static bezog sich auf Kollege Maik.

Das display:block war die Lösung meines Problemchen und ich war zu ... (such Dir was aus :-) den readme-file zu lesen.

Wenn wir uns in Bochum sehen oder auch sonst mal hier in MG quatschen wir mal darüber. Summasumarum funzt es.

Grüße aus RY