Navigation a la Suckerfish und der geliebte IE6

[phiesel]

Hallo Leute,

bin schon ganz nervös, das ist mein erster Beitrag im Contao Forum

Habe nun meine erste Seite mit Contao realisiert und bin damit zu 99,999 % zufrieden, das CMS ist wirklich super!

Nun zum eigentlichen Thema: Habe ein CSS Suckerfish Menü eingebaut. Funktioniert soweit einwandfrei - außer im IE6. Habe schon alles probiert, overflow:visible, z-index, position relative, absolute.......... nix hilft, die Unterpunkte sind im IE immer mit einer Scrollbar

Kann mir da jemand einen Tipp geben bitte??

Link: http://salzburglive.hiesel.net

Vielen Lieben Dank!

[siebenvier]

Eine Lösung wäre, die Benutzer darauf hinzuweisen, dass es sich beim IE6 um einen veralteten Browser mit eklatanten Sicherheitsmängeln handelt, den man schleunigst in Rente schicken sollte.

Eine sinnvolle Lösung dafür gibt es hier:
Browser Update

Ansonsten kannst du nur eine CSS Weiche für den IE6 basteln, die zum Einsatz kommt, sobald jemand mit diesem Bowser deine Seite aufruft.

Eine interessante Nachricht zu diesem Thema findest du hier:
Internet Explorer 6 wie 9 Jahre alte Milch

[phiesel]

naja, ich würde natürlich auch lieber alle ie6 user zum update bringen, aber es gibt auch viele leute, die von ihrer arbeit aus ins internet gehen und da können sie den browser nicht so einfach updaten!

trotzdem danke, aber ich weiß, dass die css navi schon ein paar leute realisiert haben auch mit dem IE 6 und auch in contao, also wäre ich für weitere hilfe sehr dankbar!

lg

[lucina]

Ich habe hier keinen IE6, und ich habe nicht wirklich Lust, dafür extra ne VM aufzusetzen & Dein CSS auseinanderzufummeln - aber wenn da Scrollbalken sind, dann ist das ja ein Indiz dafür, dass das innenliegende Element zu groß für das umgebende ist.

Kontrolliere das doch mal, ob die Navi-Elemente wirklich alle eine definierte Höhe / Breite haben und ob das dann (plus je 3 Pixel) auch in den Navicontainer hineinpasst.

@siebenvier: Ja, all das kann man machen, und der IE6 ist auch blöde. Aber trotz Fernsehwerbung für den Nach-Nachfolger gibt's immer noch welche die den nutzen, und welche, die den unterstützen mögen. Der Hinweis auf ein Update ist *eine* Möglichkeit - eine andere ist, drei Zeilen Extracode auszuliefern. Welche jetzt die richtige ist lasse ich mal dahingestellt. Darüber hier zu diskutieren führt auch zu nichts.

[SunBlack]

Hier ist ein Beispiel, wo es unterm IE6 funktioniert. Ich hatte es auch erfolgreich auf Contao übertragen - aber inzwischen habe ich es rausgenommen, da ich HTML-Weichen im Quelltext doch nicht so sehr mag .

Ich geb dir mal alle meine CSS-Anweisungen für das Menü. Welche davon relevant sind, musst du selber sehen.

#header .mod_navigation{height:40px;position:relative;overflow:visible;background-image:url("tl_files/msg_hp_files/vert.png");background-position:0 -80px;}
#header .mod_navigation ul{list-style-type:none;}
#header .mod_navigation li{position:relative;float:left;border-right:1px solid #afafaf;}
#header .mod_navigation ul a,#header .mod_navigation ul p{height:40px;display:block;padding-right:16px;padding-left:16px;font-weight:bold;text-decoration:none;font-size:13px;color:#646464;line-height:40px;float: none !important; float: left;}
#header .mod_navigation ul a:hover{background-color:#d2d2d2;}
#header .mod_navigation .level_2{left:0;top:40px;display:none;}
#header .mod_navigation li:hover ul{width:150px;position:absolute;display:block;}
#header .mod_navigation .level_2 a,#header .mod_navigation .level_2 p{width:150px;height:auto;background-color:#ededed;border-right:1px solid #afafaf;border-bottom:1px solid #afafaf;border-left:1px solid #afafaf;font-weight:normal;line-height:25px;}
#header .mod_navigation .level_2 li{width:150px;margin-left:-1px;border-right:0px;z-index: 9;}
#header .mod_navigation table{left:0;top:0;position:absolute;}
#header .mod_navigation a:hover ul{width:150px;display:block;}
#header .mod_navigation a:hover .level_2{position:absolute;}

[phiesel]

@lucina und alle die keinen IE6 haben, anbei ein screenshot

es ist definitiv so, dass der nav container zu klein ist, aber mit overflow:visible sollte das eigentlich kein problem sein, in allen neuen browsern geht's ja auch

@sunblack: vielen dank, muss ich mir am nachmittag im detail ansehen, werde die ergebnisse dann posten

lg

[psren]

overflow: visible; scheint im ie6 Probleme zu machen
http://www.css4you.de/overflow.html
Inwiefern sich das auswirkt vermag ich leider nicht zu sagen.

[phiesel]

habe mir mal kurz im IE6 das beispiel von sunblack angesehen

lustig dabei ist, dass im IE6 overflow:visible angenommen wird, das habe ich in meine CSS auch drinnen aber beim IE6 steht dann: overflow:auto - ich glaube, dass da das problem liegt!

[siebenvier]

@phiesel:
Vielleicht hilft dir ja auch dieser Artikel weiter: Contao Suckerfish Tutorial

Falls du ihn nicht schon kennst ...

@lucina:
Ich sprach ja auch nur von *einer* möglichen Lösung.
Mir geht es da eher wie SunBlack - ich versuche auf diese Art von Navigation zu verzichten, da sie auch nur mit einem zusätzlichen JavaScript wirklich im IE6 funktioniert.

[phiesel]

@siebenvier nach diesem tutorial hab ich's aufgebaut gg danke

[siebenvier]

@siebenvier nach diesem tutorial hab ich's aufgebaut gg danke

Hab mal in deinen Quellcode geschaut ...

Wenn ich versuche das notwendige JavaScript aufzurufen, bomme ich das hier als Antwort:
The requested URL /plugins/sfHover.js was not found on this server.

Kann es sein, dass dein Problem mit dem IE6 daher kommt?

Versuche doch mal, das sfHover.js in den Fuss deines Templates zu platzieren (noch vor </body>) ...

[phiesel]

JUHUUUUUUU ES GEHT!

und die lösung war sooo einfach: statt overflow:visble; muss man für den IE6 overflow:visible !important nehmen, weil er's sonst scheinbar mit overflow:auto "überbügelt"

super, danke für eure hilfe!

lg

[siebenvier]

Ahh ok

Ich sehe, du hast ja eine Weiche für den IE6 drin eine Zeile höher

<!--[if lte IE 6]><script type="text/javascript" src="plugins/shover.js"></script><![endif]-->

Dann kann die Zeile ja raus:

<script type="text/javascript" src="plugins/sfHover.js"></script>

[phiesel]

ja, da hast du recht, aber die steht gar nicht bei den zusätzlichen head tags, und es gibt auch kein sfhover.js nur ein shover.js kA wo ich diese zeile damals ergänzt habe, nicht bei den zusätzlichen head tags, sondern irgendwo anders *nooblike* vielleicht hast du eine idee?

lg

[siebenvier]

ja, da hast du recht, aber die steht gar nicht bei den zusätzlichen head tags, und es gibt auch kein sfhover.js nur ein shover.js kA wo ich diese zeile damals ergänzt habe, nicht bei den zusätzlichen head tags, sondern irgendwo anders *nooblike* vielleicht hast du eine idee?

lg

Na wenn du es nicht bei den zusätzlichen head tags im Seitenlayout hinzugefügt hast, dann kann es ja nur im Template "fe_page.tpl" eingetragen sein.
Kann das so sein?

[phiesel]

hast recht gehabt, super, danke!


habe da den wald vor lauter bäumen nicht gesehen gg

[phiesel]

hallo leute, vielleicht könnt ihr mir nochmal einen kleinen tip geben:

jetzt funktioniert (fast) alles sowohl im FF3, als auch im IE8, IE6 und Safari.

Nur wenn ich im IE 7 über die Navigation fahre, dann kleben auf einmal das "Home" Symbol und das nächste zusammen, er ignoriert also die margin-left:10px;

irgendjemand einen tip?

danke, LG

[siebenvier]

Eventuell stört den IE7 das

text-indent:-3000px;

in der Klasse .first ...?

[phiesel]

nope, wenn ich das rausnehme, dann rutscht's auch rüber

[psren]

.mod_navigation .level_1 .first {
background-image:url("tl_files/salzburglive_layout/navigation/home_up.gif");
background-repeat:no-repeat;
display:block;

nimm mal das display:block; raus

[phiesel]

danke psren, aber das ging leider auch nicht, habs jetzt einfach so gelöst, dass ich von margin-left auf margin-right gewechselt habe und jetzt geht's, scheinbar frisst der IE 7 in dieser Konstellation die margin-left

vielen dank leute,

lg