Inhalt rutscht bei 3 Spaltenlayout - IE Bug?

obi · 18.06.2007, 20:04

Hi,
Ich habe ein 3 Spalten Layout mit floats.
Bei der rechten Spalte rutscht der Inhalt im IE immer in die Mitte:

Link

Beim FF passt eigetnlich alles.
Komisch ist auch, dass die Anzeige beim IE wieder hinhaut, wenn ich wahllos irgendwelchen Inhalt an die Werbung hänge, das Überstehende wird dann aber wieder in die Mitte geschoben...

Hier noch der CSS Code für die Container:

Code:

#container {
	position:relative;
	padding:0;
	margin:40px auto;
	text-align:left;
	width:800px;
	}
	
#left_container {
	float:left;
	width:150px;
	display:inline;
	}
	
#right_container {
	float:right;
	width:150px;
	display:inline;
	height:700px;
	}

#main_container {
	float:left;
	width:500px;
	display:inline;
	overflow:hidden;
	}

Bei dem "großem" Container benutz ich noch ein clearfix:

Code:

.clearfix:after {
	content: ".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}

Zergling-new · 18.06.2007, 21:21

Benutz YAML, dann passiert das nicht
http://www.yaml.de/

Kann dein Problem weder durch das CSS noch durch den Online-Link nachvollziehen. Screenshot? Ein abgemagertes HTML/CSS Gerüst mit verschiedenfarbigen Hintergründen erleichtert die Suche nach Fehlern enorm.

Übrigens float:right verwende ich nie, wenn 3 float:left Spalten, wenn die Breiten nicht passen werden die hinteren Spalten umgebrochen, wenn man float:left mit float:right mixt, kann es zu Überlappungen führen. Die Fehlersuche bei float:left-only Spalten ist da etwas einfacher finde ich.

nikosch · 18.06.2007, 21:37

Zitat:

Zitat von Zergling

Kann dein Problem weder durch das CSS noch durch den Online-Link nachvollziehen. Screenshot?

Dann mach mal Dein AdBlocker aus...

Cooles Layout, auch wenn ich das Thema an sich doof finde.

Vielleicht passen die Container aus irgendwelchen Gründen nicht (margin, padding, border werden bei IE ja anders aufgerechnet, Stichwort boxmodel). Versuch mal #container ein paar Pixel größer zu machen.

obi · 18.06.2007, 21:41

ich habe gerade deinen Tipp mit dem Einfärben befolgt, und siehe da, sobald ich für die Linke(!) Spalte eine Hintergrundfarbe wähle rutscht das Banner im IE wieder in die rechte Spalte - keine Ahnung woran das liegt, aber es scheint zu funktionieren

Zergling-new · 18.06.2007, 22:08

Hintergrundbildeinstellungen haben nie Auswirkungen auf die Ausmaße, das liegt an etwas anderem dann.

obi · 19.06.2007, 01:02

sobald ich aber alleine die zeile background:#fff; rausnehme geht's.
Vielleicht hab ich irgendwo ne anweisung drin, die erst überschrieben werden muss.. wie auch immer, es geht.
Danke für die hilfe.

Zergling-new · 19.06.2007, 09:45

Dann hast du vielleicht nen CSS-Syntax Fehler der durch die Zeile beeinflußt wird.

obi · 19.06.2007, 11:30

Für alle die möglicherweise ein ähnliches Problem haben/hatten: Es handelt sich wohl um den sognt. Inline Wrap Bug

nikosch · 19.06.2007, 15:34

Woran machst Du das fest? Weder sind div inline Elemente, noch tritt hier ein Zeilenumbruch auf. Schließlich enthalten die Divs kein per background eingebundenes Image. Ich habe zwischen Deinem Problem und dem verlinkten Artikel keinen Zusammenhang gefunden.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild verschafft sich platz		HTML, Usability und Barrierefreiheit	14	11.08.2008 23:45
mit DropDown DIV inhalt ändern	Soese	HTML, Usability und Barrierefreiheit	2	30.06.2008 01:38
Variable mit externen Inhalt setzen?	errox	PHP Tipps 2008	7	30.05.2008 21:39
Textdatei erstellen - Inhalt mit Variablen füllen	DDogg	PHP Tipps 2006	3	25.09.2006 13:44
Per FTP einen Ordner inkl. Inhalt löschen?	BartTheDevil89	PHP Tipps 2006	2	10.09.2006 11:46
Inhalt zentrieren trotz Scrolleiste	max-dhom	HTML, Usability und Barrierefreiheit	5	20.05.2006 17:24
innerHTML/document.write und Inhalt in anderen Frame ändern		HTML, Usability und Barrierefreiheit	1	29.01.2006 10:35
Mails an PHP übergeben und Inhalt auslesen?	ThaRider	PHP Tipps 2006	16	16.01.2006 21:59
Inhalt einer Text-Datei löschen		PHP Tipps 2005-2	3	11.07.2005 23:21
[Erledigt] Eingabefeld: Bei Klick in's Feld Inhalt markieren		HTML, Usability und Barrierefreiheit	5	13.06.2005 23:16
[Regex] Inhalt im Inhalt auslesen		PHP Tipps 2005	2	23.05.2005 15:38
Inhalt in Layout einfügen		PHP Tipps 2004	1	25.09.2004 14:15
Variablen inhalt verändern (löschen und einfügen)		PHP Tipps 2004	2	16.09.2004 11:57
Inhalt einer .txt-Datei löschen		PHP Tipps 2004	5	28.08.2004 22:16
Inhalt einer Datei einbinden ohne Inhalt anzuzeigen	Corvin	PHP Tipps 2004	4	22.07.2004 09:24

18.06.2007, 20:04
obi Erfahrener Benutzer Registriert seit: 26.06.2004 Beiträge: 270	Inhalt rutscht bei 3 Spaltenlayout - IE Bug? Hi, Ich habe ein 3 Spalten Layout mit floats. Bei der rechten Spalte rutscht der Inhalt im IE immer in die Mitte: Link Beim FF passt eigetnlich alles. Komisch ist auch, dass die Anzeige beim IE wieder hinhaut, wenn ich wahllos irgendwelchen Inhalt an die Werbung hänge, das Überstehende wird dann aber wieder in die Mitte geschoben... Hier noch der CSS Code für die Container: Code: #container { position:relative; padding:0; margin:40px auto; text-align:left; width:800px; } #left_container { float:left; width:150px; display:inline; } #right_container { float:right; width:150px; display:inline; height:700px; } #main_container { float:left; width:500px; display:inline; overflow:hidden; } Bei dem "großem" Container benutz ich noch ein clearfix: Code: .clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

18.06.2007, 21:21
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Benutz YAML, dann passiert das nicht http://www.yaml.de/ Kann dein Problem weder durch das CSS noch durch den Online-Link nachvollziehen. Screenshot? Ein abgemagertes HTML/CSS Gerüst mit verschiedenfarbigen Hintergründen erleichtert die Suche nach Fehlern enorm. Übrigens float:right verwende ich nie, wenn 3 float:left Spalten, wenn die Breiten nicht passen werden die hinteren Spalten umgebrochen, wenn man float:left mit float:right mixt, kann es zu Überlappungen führen. Die Fehlersuche bei float:left-only Spalten ist da etwas einfacher finde ich.

18.06.2007, 21:41
obi Erfahrener Benutzer Registriert seit: 26.06.2004 Beiträge: 270	ich habe gerade deinen Tipp mit dem Einfärben befolgt, und siehe da, sobald ich für die Linke(!) Spalte eine Hintergrundfarbe wähle rutscht das Banner im IE wieder in die rechte Spalte - keine Ahnung woran das liegt, aber es scheint zu funktionieren

18.06.2007, 22:08
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Hintergrundbildeinstellungen haben nie Auswirkungen auf die Ausmaße, das liegt an etwas anderem dann.

19.06.2007, 01:02
obi Erfahrener Benutzer Registriert seit: 26.06.2004 Beiträge: 270	sobald ich aber alleine die zeile background:#fff; rausnehme geht's. Vielleicht hab ich irgendwo ne anweisung drin, die erst überschrieben werden muss.. wie auch immer, es geht. Danke für die hilfe.

19.06.2007, 09:45
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Dann hast du vielleicht nen CSS-Syntax Fehler der durch die Zeile beeinflußt wird.

19.06.2007, 11:30
obi Erfahrener Benutzer Registriert seit: 26.06.2004 Beiträge: 270	Für alle die möglicherweise ein ähnliches Problem haben/hatten: Es handelt sich wohl um den sognt. Inline Wrap Bug

19.06.2007, 15:34
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Woran machst Du das fest? Weder sind div inline Elemente, noch tritt hier ein Zeilenumbruch auf. Schließlich enthalten die Divs kein per background eingebundenes Image. Ich habe zwischen Deinem Problem und dem verlinkten Artikel keinen Zusammenhang gefunden.