subcolumns im IE6 untereinander

**almitra** · 04.01.2010, 13:14

Hallo Community,

leider habe ich ein Problem aus dem Vorjahr ungelöst mitgeschleppt. Ich hatte es bereits gepostet im allgemeinen CSS-Forum: https://community.contao.org/de/showthread.php?p=32402

U.A. werden subcolumns untereinander angezeigt, zB bei den Seiten all-brands und Impressum.

Die Datei subcols.css ist definitiv eingebunden, ob die mit der Erweiterung mitgelieferten Dateien subcolsIEHacks.css, subcolsIEHacks_extended.css und subcols_extended.css auch angesprochen werden, war mir nicht ganz klar, aber auch das dezidierte Einbinden dieser Dateien per CC hat keine Änderung gezeigt, also nehme ich an, sie sind es ohnehin.

Danke für jeden Tipp,
Almitra

**Thomas** · 04.01.2010, 17:46

Mir scheint, dass die Korrektur CSS nicht geladen werden.

Der Quellcode im IE 6 gibt mir folgende Einbindungen zurück:

Code:

<LINK media=screen href="system/typolight.css" type=text/css rel=stylesheet>
<LINK media=screen href="system/iefixes.css" type=text/css rel=stylesheet>
<LINK media=screen href="plugins/slimbox/css/slimbox.css" type=text/css rel=stylesheet>
<LINK media=all href="system/modules/subcolumns/html/subcols.css" type=text/css rel=stylesheet>
<LINK media=all href="plugins/imageflow/imageflow.css" type=text/css rel=stylesheet>
<LINK media=all href="xBasic.css" type=text/css rel=stylesheet><LINK media=all href="xElements.css" type=text/css rel=stylesheet>
<LINK media=all href="xForm.css" type=text/css rel=stylesheet>
<LINK media=all href="navigation.css" type=text/css rel=stylesheet>

Dort ist nicht von subcolsIEHacks.css, subcolsIEHacks_extended.css und subcols_extended.css zu sehen.

Ist auch nicht weiter verwunderlich, da Du nur für den IE 7 im Header die subcolsIEHacks.css laden läßt.

Code:

<!--[if lte IE 7]><link href="system/modules/subcolumns/html/subcolsIEHacks.css" rel="stylesheet" type="text/css" /><![endif]-->

Logischer Weise ist der IE 6 dann davon nicht betroffen.

Dein Problem liegt vermutlich im Pixel-Bug vom IE 6.
Du kannst mal folgendes versuchen:
Und zwar allen 2 Columns von 3en, einen margin-left oder margin-right mit -3px mitzugeben.

Zusätzlich mußt Du die CSS mit:

Code:

<!--[if lte IE 6]><link href="system/modules/subcolumns/html/sonstwas.css" rel="stylesheet" type="text/css" /><![endif]-->

laden lassen.

Das könnte das Problem im IE 6 beheben.

Nicht getestet, aber eine Vorahnung.

**almitra** · 04.01.2010, 19:14

Danke dir Thomas, hab jetzt in der xElements.css
.c33l, .c33r, .c50l, .c50r ein margin-right von -3px hinzugefügt
Hattest du das so gemeint?

Ich ging davon aus, dass 'lte' bedeutet 'kleiner als oder gleich',
dh. dass dadurch der IE7 und alle darunter angesprochen werden, auch IE6. Im IE-Tester funktioniert das jedenfalls. Bin ich im Irrtum?

Ich wüsste gar nicht, in welchem Template ich das hinzufügen sollte, da greife ich nicht so gerne hin. Dafür ist ja die Extension da ...?

LG, Almitra

**Thomas** · 04.01.2010, 20:19

Da hast Du 2 Möglichkeiten!

1. im Seitenlayout im Bereich Zusätzliche <head>-Tags eintragen
2. im Template selber, an der selben Stelle wo der IE 7 differenziert wird

Ich habe Deine Seite auch mit dem IE-Tester kontrolliert, da wurden die spezifischen CSS nicht für IE 6 geladen.

Ich habe mir gerade Deine CSS Anweisungen nochmal komplett angesehen.

Die solltest Du nochmal gründlich überdenken.
Denn die ganze fehlerhafte Positionierung und Weitenbegrenzungen bewirkt das Aussehen im IE. Das liegt nichtmal am Pixelbug.

Ich versuche das jetzt einmal schrittweise:

Suche in xElements.css:

Code:

.subcolumns {
overflow:visible;
width:650px;
}

Ersetze mit:

Code:

.subcolumns {
overflow:visible;
}

Suche in xElements.css:

Code:

.ce_text {
left:160px;
line-height:1.7;
margin-bottom:10px;
margin-top:10px;
position:relative;
width:560px;
}

Ersetze mit:

Code:

.ce_text {
line-height:1.7;
margin-bottom:10px;
margin-top:10px;
position:relative;
}

Damit hast Du dann die Subcolumns auf die gesamte Breite definiert, jetzt mußt Du nur noch die Inhalte der Columns positionieren und nicht die Columns selber. Auch nicht das Modul, sondern nur die Inhalte.

Die Überschrift *links to our brands* würde ich zusätzlich mit einem DIV oberhalb der Columns innerhalb Subcolumns platzieren und einzeln formatieren. Sonst bekommst Du Probleme mit der Breite des ersten Columns.

**felixpfeiffer** · 04.01.2010, 20:50

Hallo,

also, eigentlich werden die für den IE notwendigen CSS-Dateien automatisch eingebunden. Ob dabei die extended-Version oder nicht "normale" genutzt wird, hängt von einer Einstellung in TL ab. Ob nämlich das YAML-Framework verwendet wird oder nicht.

Warum bei dir die CSS-Dateien nciht geladen werden kann ich noch nciht sagen. Nutzt Du TL 2.8 oder ist es noch die 2.7.x?

Gruß, Felix

**Thomas** · 05.01.2010, 07:47

Hallo, Felix!

Das Problem liegt aber zunächst erstmal nicht an der Erweiterung selbst!

Schau Dir mal bitte den Quelltext an, dort werden von almitra 2 Breitendefinitionen direkt auf die Klassen subcolumns und die Modulausgabe ce_text angewendet.
Und solange das nicht behoben ist, werden im IE die Columns untereinander angeordnet.

Mit meinem Beispiel von oben wird das zurück gesetzt.

Man kann die Klasse subcolumns ja auch begrenzen, müßte dann aber subcolumns positionieren und nicht die Ausgabe innerhalb.

Das könnte dann in xElements.css etwa so aussehen:

Code:

.subcolumns {
overflow:visible;
margin-left:140px;
width:650px;
}

.ce_text {
line-height:1.7;
margin-bottom:10px;
margin-top:10px;
position:relative;
}

Nur mit FF getestet, dort sieht die Ausgabe damit ähnlich wie vorher aus.
Für den IE kann ich das ohne Umgebung leider nicht testen.

**felixpfeiffer** · 05.01.2010, 08:53

Hallo Thomas, hallo Almitra,

also, so genau hatte ich das garnicht angesehen.
Zu der Verwendung der Subcolumns-Erweiterung ist vielleicht zu sagen, dass die mitgelieferten CSS-Dateien bzw. Befehle möglichst nicht überschrieben werden sollten. Nur so ist die richtige Funktionalität möglich.

Gruß, Felix

**almitra** · 05.01.2010, 14:58

Ich stehe bei TL 2.7.6.
Ich dachte mir schon, dass es an den CSS liegt. Da muss ich jetzt also wieder von vorne anfangen, mir für die Einrückung was anderes überlegen. Wäre schön, wenn ich damit auch alle anderen Verschiebungen behebe. Ja wenn man glaubt, man ist fertig ...
Herzlichen Dank jedenfalls!
Almitra

**Thomas** · 05.01.2010, 15:53

Naja, Du hast halt mit den Subcolumns ein Instrument, mit dem Du eben nicht auf IE-Bugs achten mußt, da dort schon diese korrigiert werden.

Mit Deinen Definitionen hast Du eben dafür gesorgt, dass zwar die Subcolumns bestehen bleiben aber die Inhalte aus diesen Bereichen heraustreten. Dem FF scheint das in diesem Moment egal zu sein, der IE reagiert da allerdings etwas anders. Und das sind eben die Punkte, mit denen jeder Designer fertig werden muß.

**almitra** · 05.01.2010, 17:57

Die Subcolumns funktionieren jetzt definitiv, ohne jede Adaptionen mit IE-Fixes etc.
Ich habe das CSS dahingehend geändert, dass ich "#main .inside" ein margin-left gegeben habe, dafür alle margins und Positionierungen der Inhalteelemente rausgenommen. Kämpfe jetzt nur noch mit dem Content-Slider .. aber das ist eine andere Geschichte.
Jedenfalls war der IE6 der einzige, der mir diese Formatierung übel genommen hat, ab IE7 und soweit festzustellen alle anderen Browser hatten mein ursprüngliches CSS toleriert.
Dank insbesondere an Thomas, du hast mir auf die Sprünge geholfen. Und natürlich an Felix für die klasse Extension!
lg
Almitra

**Thomas** · 05.01.2010, 18:09

Schön wenn es funktioniert!

**ThKrueger** · 06.01.2010, 00:18

Ich schließe mich mit meiner Frage hier mal an, denn ich erhalte im FF3.5 (und nur hier) unregelmäßig eine fehlerhafte Darstellung. Es werden nicht die 4 Cols nebeneinander angezeigt, sondern manchmal erfolgt nach der Ersten, manchmal nach einer anderen die Darstellung runtergesetzt in der nachfolgenden Zeile. (Manchmal muss man 5-7 Mal F5 drücken, um den Effekt zu sehen). Der Effekt kann aber auch beim ersten Laden der Seite auftreten.

Beispiele:
Bei der Teamdarstellung der jeweils vier BIlder http://www.stg-brandenburg.de/touristinformation.html
im ersten Content-Element mit den vier Bildern nebeneinander: http://www.stg-brandenburg.de/home.html

Da sich die Ansicht beim Aktualisieren der Seite mit F5 ändert, kann ich es nicht nachvollziehen, woran es liegen könnte. Jemand eine Idee?

**Thomas** · 06.01.2010, 06:54

Hallo!

Ich habe das gerade nur mal kurz überflogen.

Mir ist die relativ konfuse Positionierung ins Auge gefallen.

Ich würde Dir raten, die ganzen Paddings nochmal auf den Ursprung zurück zu versetzen und dann mit der Positionierung der Inhalte anzufangen und Dich dann nach Aussen vor zu arbeiten.

Normaler Weise brauchst Du die cols und subs nicht selber positionieren.
Es reicht aus, die Formatierungen auf ce_text innerhalb der columns anzuwenden.

Was auch überhaupt keinen Sinn macht ist das hier:

In Zeile 116 vom basemod.css gibst Du den subcolumns ein padding von 8px mit,

Code:

.subcolumns, 
.subcolumns_oldgecko {
overflow:hidden;
padding:0 0 8px;
width:100%;
}

in Zeile 214 setzt Du es wieder zurück.

Code:

 .article_content .subcolumns,
 .article_content .subcolumns_oldgecko {
margin-bottom:-8px;
}

Dann kannste es auch gleich weg lassen.

Auch wenn es 2 unterschiedliche Anweisungen sind, heben sie sich dennoch im Gesamtbild wieder auf.

Wie gesagt, setz erstmal alle Positionierungen zurück, die nicht zum Default gehören. Dann fang über ce_text an zu positionieren.

Damit solltest Du zum gewünschten Ziel kommen.

Wenn man die Defaultanweisungen überschreibt, kann es zu solchen ungewünschten Situationen kommen.

**ThKrueger** · 06.01.2010, 11:11

Hallo Thomas,
Danke für die ausführliche Antwort. Ich leite Sie an den Programmierer weiter, der unser Template erstellt hat. Gebe später dann eine Rückmeldung.