Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 3
Layout zerschossen im IE6
 
catcat
Jr. Member
 
Total Posts:  26
Joined:  2008-12-27
Hamburg
 

Moinmoin,

ich bin grade am basteln mit magento 1.3.0 und ein Bekannter hat mich drauf hingewiesen, das das Layout im IE6 “seltsam” aussieht.

Die mittlere Spalte (col-main) sitzt links unter der linker Spalte.
Ich dachte erst, wenn ich die mittlere Spalte oder deren Inhalt etwas schmaler mache, gehts - geht aber nicht.
Dann habe ich mit den margins der Spalten ein wenig rumgespielt - hat auch nichts gebracht.
Aber vielleicht habe ichs auch einfach nicht richtig gemacht…

Im englischsprachigen Forum gibts einige Posts zum Thema IE6, leider brachten die mich auch nicht wirklich weiter.

Was interpretiert der IE6 denn nun anders? Die floats? Die margins? und vor Allem: Was kann ich dagegen unternehmen?

Wenn jemand ne praktikable Lösung wüsste, wäre ich echt froh.

Image Attachments
ie6-test.png
 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Generell hat der Internet Explorer 6 ein Problem mit dem Boxmodell (bis zu dieser Version berechnet er dieses falsch).

Kann an vielen Dingen liegen und eben so viele Lösungsansätze gibt es.

1. Suche in der entsprechenden CSS-Datei nach dem Bereich (ich glaube coloum main oder so) - gib ihm mal die CSS-Anweisung “overflow:hidden;” - kann bei diesen alten IE-Kisten oft Wunder bewirken.

2. Weise Ihm für diesen Bereich andere Maße zu.
Dazu hier mal ein Beispiel aus meinem aktuellen Projekt (auch die mittlere Spalte)

<!--[if lte IE 6]>
<
style type="text/css">.col3-layout .col-main {overflow:hiddenpadding-left:0</style>
<!
[endif]-->

Das kürzel lte steht hier für “älter als & gleich IE 6”. Bei mir waren es eben die paddings, die hier für diesen Browser und seine Vorgänger auf 0 gesetzt werden. Das mit dem overflow habe ich gemacht damit die Inhalte nicht über diesen Bereich drüber laufen. (Die Regel wenn du mit so etwas wie “width:100%;") arbeiten solltest. Da der IE sich denkt “100% von was?”

Generell empfehle ich dir aber den IE-Tester zu installieren. Link zur IE-Tester Info + Download

Es gibt auch andere Tools, aber dieses macht keinerlei Probleme, da die einzelnen IEs in sogenannten Standalone Modus ausgeführt werden und somit es keinerlei Inkompatiblität bei der Ausführung gibt.

Bitte mal Info wenn du nicht weißt wo man diese Erziehungsmaßnahmen für den IE unterbringt.

LG - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
catcat
Jr. Member
 
Total Posts:  26
Joined:  2008-12-27
Hamburg
 

Erstmal danke für das reply. Ich war leider ne Woche ausser Haus und kann erst jetzt weitermachen.

Ich hab das mit dem overflow mal gemacht und es hat nichts gebracht.
Den “IE-All-in-one” hab ich mir mal installiert, aber der zeigt bei allen IEs - ausser dem IE 8 - alles total zermanscht an. Beim IE8 passt alles perfekt.
Andere Leute mit IE7 sagten, das es auch im IE7 OK ausehen würde… bei mir natürlich nicht. Klar.

Deinen obigen IE-Fix ... soll ich den in den header stecken zu den anderen css-Dingens? Nee, ne?

Das geht mir langsam echt auf den Senkel… ich habe noch einige Macken entdeckt und zusammen mit der IE6-Geschichte entwickelt sich magento langsam echt zu einem NoGo für mich :(

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Also was diese “Conditional Comments” angeht, dass wird unmittelbar vor dem schließenden head-Tag eingefügt, also genau unter den CSS & JavaScript-Includes.

In der Praxis mußt du hier her gehen um das einzusetzen:app/design/frontend/default/default/template/page/html/head.phtml
Damit du weißt wohin, siehe den folgenden Code (ganz oben siehst du auch den Kompatiblitätspatch zwischen IE7 & IE8):

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<
meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<
title><?php echo $this->getTitle() ?></title>
<
meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<
link rel="icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
<
link rel="shortcut icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
<
script type="text/javascript">
//<![CDATA[
    
var BLANK_URL '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
    var 
BLANK_IMG '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>
<?php 
echo $this->getCssJsHtml() ?>
<!--[if lte IE 6]>
<
style type="text/css">.col3-layout .col-main {overflow:hiddenpadding-left:0
</style><![endif]-->
<?php echo $this->getChildHtml() ?>
<?php 
echo $this->helper('core/js')->getTranslatorScript() ?>
<?php 
echo $this->getIncludes() ?>

Was diese IE-Geschichte generell angeht sind noch die folgenden Dinge zu beachten:
1. Natürlich hat Varien für die Themes so wie man sie herunterlädt bzw. installiert daran gedacht, die gängigsten Darstellungspannen im IE zu fixen. Jedoch sollte klar sein, dass wenn du ganz andere Maße in der CSS oder wo auch immer hinterlegst, diese Regeln entweder garnicht mehr greifen oder sie zu eventuellen Darstellungsfehlern führen, daher evtl. mal die CSS für den IE testweise löschen & eben testen.

2. Was mich hingegen überhaupt nicht wundert ist, dass in den USA der IE6 kaum mehr beachtet wird - die haben dort eine andere Affiniät zu solchen Dingen & surfen daher mit aktuelleren Browsern. Daher auch von meiner Seite keinerlei Vorwurf an die Entwickler, ich würde diese Zwiebacksäge auch lieber Heute als Morgen aus meinem Unterstützungsportfolio nehmen aber in Deutschland (im Durchschnitt immer 2 Jahre hinterher) ist er eben noch relevant.

Für diese Darstellungsprobleme kann also weder Varien noch Magento etwas!

Noch eine Anmerkung zum Code oben:
Normalerweise setzt man diese IE-Erziehungsmaßnahmen in den XML-Dateien, jedoch habe ich das noch nicht ganz gecheckt, daher der Weg über die PHTML-Datei.

LG - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
sebtb
Sr. Member
 
Avatar
Total Posts:  196
Joined:  2008-12-28
 

ie7minus.css

iestyles.css

was ist mit den stylesheets? ie7minus? heißt das alles ab IE7 downwärts? weil diese css sind schon im default drin.

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Genau so, steht es im Quelltext (wenn ie6 und älter dann verwende ie7 minus) + die weiteren Regeln für den IE. Diese funktionieren aber eben nur so lange wie man nichts groß ändert. Wenn das Layout einen anders struktorierten Aufbau oder eben mit anderen Klassen & IDs in den CSS-Files gearbeitet wird - sind diese CSS Dateien für den IE mehr hinderlich wie das sie unterstützen.

Eine Regel für die verschiedenen Darstellungsmodi des 8ers sind dort aber noch nicht berücksichtigt. Generell läuft der ja sauberer wie seine Vorgänger, was ich da oben anbiete ist eine Komfortfunktion. Man brauch sich keinerlei Gedanken machen, da in IE7 & IE8 die “Standardkomforme Darstellung” des 7er erzwungen wird. Bevor es auch nur im Ansatz eine falsche Darstellung im 8er geben kann schicke ich ihn schon in den anderen Modus. Man könnte sagen ich nehme dem User die Entscheidung ab. Er kann natürlich wenn ich dieses tag nicht verwenden würde auch manuell oben auf diesen neuen Button drücken. Ich bilde mir aber eben ein, dass diesen die Masse garnicht mitbekommt. Die Masse sieht nur “Fehldarstellung” und ist Ruck-Zuck wieder verschwunden.

Ich persönlich mache es so, dass ich innerhalb der Original CSS Deklarationen meine eigenen Styles definiere, da auch funktionell sehr viel dran hängt. Das hat echt einer geschrieben der Ahnung hat. (Egal ob modern, default oder blank) - generell setze ich auch nur diese ein. Es sieht ja trotzdem gänzlich anders aus am Ende.

Hast du eine konkrete Frage bzw. Problem? Dieser IE ist für mich eine Festung die ich jeden Tag aufs neue erobern muss!  grin

LG - D.Sasse

 
Magento Community Magento Community
Magento Community
Magento Community
 
sebtb
Sr. Member
 
Avatar
Total Posts:  196
Joined:  2008-12-28
 

ja schau mal www.schattenspender24.de mit IE6 an, da is so n riesenabstand, kA was das schon wieder sein soll^^..und noch ne Frage wenn du schon da bist, die Suche-> rechts in der Sidebar, wie hau ich die am kopf der sidebar hinne?

best regards Sebastian

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Wie heißtn das Theme? Scheint aber lösbar. Sehe aber zwischen dem 7er & dem 8er noch größere Abweichungen - da sollte zunächst Einigkeit mit dem oben erwähnten Patch geschafft werden. Dann wären diese beiden schon einmal safe.

Ich brauche aber umbedingt, die Basisversion von dem Theme, dann könnte ich das mit der Suche auch gleich machen, ist kein Thema. Auf dem ersten Blick sehe ich schätzungsweise 3 Dateien wo ich ran muss.

Oder handelt es sich um das default Theme?

Ausschließlich die wo ich dann was dran mache, würde ich posten (mit Info wo die hinkommen).

Was ich jedem empfehlen kann ist IE Tester (wenn man auf einer Windows-Maschine ohne Probleme bequem alle relevanten IEs gleichzeitig testen will) Projektseite: http://www.drweb.de/magazin/ie-tester-alle-versionen-des-internet-explorer-in-einem-werkzeug/

Aber keine Bange ich bekomme das hin. Oft probiere ich auch nur 2 bis 3 Sachen aus (typische Schwächen dieser Kisten) und eine davon läuft dann.  grin

Auf den ersten Blick habe ich aber schon gesehen das dein Seitenlayout technisch gesehen “zu modern” für diese IEs ist. Die sind da etwas speziell.

LG - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
sebtb
Sr. Member
 
Avatar
Total Posts:  196
Joined:  2008-12-28
 

das is das standardlayout halt mit Änderung von mir^^

sogar default/default/

leider is das mein Erstlingsprojekt und dummerweise würde durchn update von magento alles kaputt gehen denke ich oda? weil ich einiges sehr individuelles gebaut hab^^ ich werd ma fix das Tool runterladen und schauen was ich machen kann^^

In der Werbeagentur wo ich vor kurzem gearbeitet hab, ist mit 2009 die IE6 unterstützung abgeschafft. Es macht viel zu viel Aufwand auf dem Browser noch alles kompatibel zu machen, die Schiene fahre ich eigentlich auch :x

edit:// ach du meine Nase, wie siehtn das unter IE8 aus :X

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Kannste mal sehen (8er) du kannst es wie schon vorher erwähnt im Original Browser IE8 zwar manuell verbessern. Aber das solltest du eben nicht vom User erwarten. Ich schwöre dir, wenn du diesen Patch den ich oben gezeigt habe einbaust, dann hast du es 100 % wie im 7er und kannst dich entspannd zurücklegen.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Die jenigen die den 6er nicht zu annährend 100% mitnehmen schneiden sich ins eigene Fleisch. Die Kiste ist zwar von 2001, hat aber (nur diese Version) in Deutschland einen Marktanteil von über 40% - ich wiederhole, nur diese IE Version!

Grund ist das viele ihre XP-installation nicht updaten können, da gefakt. Man spricht von 4 x so oft XP installiert wie offiziell verkauft. Daher eben noch sehr relevant. Genau an dieser Stelle erkämpft man sich gegenwärtig Vorsprünge im Web, da die meisten wie auch in der Agentur für die du tätig warst mit Papierdenken rangehen und das ist falsch. (Waschweiber die Ihren Beruf verfehlt haben & sich auf etwas ausruhen wovon sie überzeugt sind, nicht aufzufliegen) Wie schön das zur Zeit wie ich das so mitbekomme die ausgebrannten Web1 Leute ausgemustert werden. Diese Durchschleich-Mentalität aus den 90ern ist vorbei, dass werden deine ehemaligen Kollegen auch noch mitbekommen. Der Nutzer ist immer das schwächste Glied in der Kette.

Bei den richtigen Browsern wie allen voran Firefox, Opera, Safari, Chrome & sogar Netscape (abwärts bis 7.1) brauch man sich keinerlei oder nur wenig Gedanken machen. Denn das ist die richtige Richtung, da die sich zu beinahe 100% an gängige Webstandarts halten. Und eben nicht wie MS ihr eigenes Süppchen kochen.

Was das Theme angeht: Bilder sind egal, CSS-Dateien wären nicht schlecht & Infos bzw. Dateien wo du was geändert hast.

LG - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
sebtb
Sr. Member
 
Avatar
Total Posts:  196
Joined:  2008-12-28
 

wollen wir weiter ICQ`oder Sykpe schreiben? würde dir ftp zugang einrichten um selbst ein Auge drauf zu werfen. vllt kannst ja noch interessanten Code für dich entdecken^^

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Is OK - können wir so machen. Habe aber heute leider keine Zeit mehr - wie stets Morgen? Uhrzeit?

Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
sebtb
Sr. Member
 
Avatar
Total Posts:  196
Joined:  2008-12-28
 

bin von morgens gegen 8-17uhr auf arbeit. danach zuhause bis 23

ich add dich morgen dann , skype steht ja in deinem Profil. also gn8 oder was du jetzt vor hast^^

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Alles klar bis denne, schätze das ich spätestens ab 20uhr on sein werde.

LG - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
Toolbude.de
Sr. Member
 
Total Posts:  221
Joined:  2008-06-16
Hannover
 

Hallo zusammen,

ich habe das gleiche Problem wie Catcat oben, das mein Layout im IE6 zerschossen wird.
Der Mainbereich wird bei mir auch unten angezeigt.

Ich habe auch schon die Vorschläge aus diesem Beitrag eingebaut und leider klappt es nicht.

Ich habe in die boxes.css folgen Code eingebaut/geändert:

.col-main { float:leftoverflow:hidden}

Und in der head.phtml

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<
meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<
meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<
meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<
meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<?php echo $this->getChildHtml() ?>
<link rel="icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
<
link rel="shortcut icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
<
script type="text/javascript">
//<![CDATA[
    
var BLANK_URL '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
    var 
BLANK_IMG '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>
<?php 
echo $this->getCssJsHtml() ?>
<!--[if lte IE 6]>
<
style type="text/css">.col3-layout .col-main {overflow:hiddenpadding-left:0</style>
<!
[endif]--> 
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php 
echo $this->getIncludes() ?>

Aber das hilft nicht! Was kann ich machen damit es funktioniert?

Gruß Andi

 
Magento Community Magento Community
Magento Community
Magento Community
 
sebtb
Sr. Member
 
Avatar
Total Posts:  196
Joined:  2008-12-28
 

schau ma nach den stylesheets, da gibt es für IE auch eigene stylesheets. passe da den centerbereich in der Größe an, bis das centerding reinpasst^^

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 3