CSS Problem mit IE

hans.karl2 · 24.04.2007, 18:17

Ich habe ein Problem mit der Darstellung meiner CSS Seite im IE. Ich habe die Seite im Firefox erstellt und danach im IE nochmal angesehen, falls dieser die Seite anders darstellt. Nun meine Befürchtung hat sich bewahrheitet. Ich habe nun gewisse Dinge wie den "CSS-Box-Model-Bug" (siehe http://www.carsten-protsch.de/zwisch...model_bug.html) recherchiert, da mein IE (6 im Windows) jedoch ein Beispiel (mit DOCTYPE Umschaltung) richtig (wie im Firefox) anzeigte, glaube ich nicht, dass es daran liegt.

Das konkrete Problem liegt darin, dass der Abstand zwischen dem ersten roten Kasten (unterhalb des Titelbildes) und dem zweiten roten Kasten im IE sehr viel größer ist als im Firefox (=gewollt). Der Abstand soll idealerweise gleich sein wie der zw. Titelbild und ersten Kasten. Das zweite Manko liegt in der Einrückung des zweiten Kastens von links, diese Einrückung ist etwas weniger als der obere Kasten (um schätzungsweise 2 px) im IE. Idealerweise sollten die beiden Kasten gleich weit von links eingerückt sein (=Firefox).

Die Seite ist unter folgendem Link zu finden:
http://hanskarl.ha.funpic.de/css/test1.html

Die CSS Datei ist unter folgendem Link zu finden:
http://hanskarl.ha.funpic.de/css/test1.css

Ich bitte jeden, der einen anderen Browser (z.B. Safari) verwendet, dass er einen Test der Seite durchführen möge und mir das Ergebnis poste.

Ich hoffe, mir kann jemand helfen.

KingCrunch · 25.04.2007, 11:43

Hmm ... Muss dein Problem anhand deiner Beschreibung nachvollziehen, da bei meinem IE und FF (beide neuste Version) keine Unterschiede erkennbar sind. Würde aber aussm bauch raus auch auffn Box-Fehler tippen und entweder ne Weiche vorschlagen oder die Seite ohne Zuhilfenahme der kritischen Elemente aufbauen (falls überhaupt möglich ^^).

nikosch · 25.04.2007, 19:04

Warum verschachtelst Du soviele divs ineinander? Vor allem das l_bottom find ich überflüssig.

Code:

<div id="Laufschrift">
			<div id="l_header"></div>
			<div id="l_content">
				<div id="l_content2">die Laufschrift</div>
			</div>
			<div id="l_bottom"></div>
		</div>

Ich denke es liegt am l_bottom, versuch mal die schriftgröße auf 2px zu setzen.
Beim zweiten Problem handelt es sich um den Three Pixel Text-Jog. Näheres findest Du im Netz, z.B. hier:http://www.positioniseverything.net/...reepxtest.html

hans.karl2 · 25.04.2007, 20:18

Ich verschachtele die Divs, weil ich für den Header ein Bild einbinde, das sich von dem Hintergrundbild des content Divs unterscheidet (selbiges bei bottom). l_content2 ist nun dafür zuständig, dass ein Abstand zum l_content gemacht wird, weil das Hintergrundbild für l_content einen Rahmen enthält (darin soll nicht der Text stehen!).

Danke für die Tipps, die Veränderung der Textgröße löste das erste Problem. Für das zweite Problem habe ich einfach das Navigations-div sehr viel größer gemacht und die Lösung im genannten Link verwendet (für Three Pixel Text-jog). Die Größenänderung war notwendig, da (nur der IE6) bei Veränderung des Inhalts der Navigationsleiste die Breitenberechnung falsch machte (war die Navigation genauso hoch wie der rechte Teil, wurde es trotzdem eingerückt -> selber Effekt wie vorher, war die Navigation jedoch kleiner, funktionierte die Änderung).

Wie kann ich die Breite eines Divs fix festlegen, egal welchen Inhalt das Div bekommt (Text, Tabellen etc.). Ich habe nämlich des öfteren größere Tabellen als Inhalt und wenn diese die max. Größe überschreiten, zerstört es mein Layout!

Eine weitere Frage bezieht sich auf die Effizienz meines erstellten Codes. Ist das bisher erstellte CSS File effizient (gibt es eine einfachere Lösung z.B. mit weniger Divs)? Sieht die Seite in jedem Browser gleich aus (ich bitte alle Personen, die diesen Post lesen und alternative Browser als Firefox und IE6 haben, sich die Seite anzusehen und mir zu posten)?

Die Änderungen (zu den Seiten im ersten Post) können unter folgendem Link eingesehen werden:
http://hanskarl.ha.funpic.de/css/test2.html
Die css-Datei sieht folgendermaßen aus:
http://hanskarl.ha.funpic.de/css/test2.css

Gibt es eigentlich auch eine Möglichkeit, in diesem Forum Screenshots (die nicht auf einem seperaten Server liegen) einzubinden, ich würde gerne für andere Benutzer, die dasselbe Problem haben, Screenshots zur besseren Anschauung posten (ich möchte die Beispieldateien gerne auf meinem Server löschen)?

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
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
Sessions Problem	StephenKing	PHP Tipps 2008	3	16.10.2007 08:30
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
[Erledigt] Problem bei Massenmails versenden mit der Funktion mail		PHP-Fortgeschrittene	3	19.01.2005 13:36
[Erledigt] Problem mit Übergabe einer Klasse in PHP4		PHP-Fortgeschrittene	10	08.01.2005 21:00
Problem mit Weiterleitung		PHP Tipps 2004-2	16	22.12.2004 17:49
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
[Erledigt] PHP Upload (Master Value/Local Value Problem)		PHP-Fortgeschrittene	5	23.11.2004 07:21
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34
[Erledigt] Problem mit Timestamp!		PHP Tipps 2004	24	08.06.2004 19:51
Login Problem		PHP Tipps 2004	4	04.06.2004 18:46
foreach problem	mAy^daY	PHP Tipps 2004	3	02.06.2004 20:29

24.04.2007, 18:17
hans.karl2 Benutzer Registriert seit: 26.01.2005 Beiträge: 30	CSS Problem mit IE Ich habe ein Problem mit der Darstellung meiner CSS Seite im IE. Ich habe die Seite im Firefox erstellt und danach im IE nochmal angesehen, falls dieser die Seite anders darstellt. Nun meine Befürchtung hat sich bewahrheitet. Ich habe nun gewisse Dinge wie den "CSS-Box-Model-Bug" (siehe http://www.carsten-protsch.de/zwisch...model_bug.html) recherchiert, da mein IE (6 im Windows) jedoch ein Beispiel (mit DOCTYPE Umschaltung) richtig (wie im Firefox) anzeigte, glaube ich nicht, dass es daran liegt. Das konkrete Problem liegt darin, dass der Abstand zwischen dem ersten roten Kasten (unterhalb des Titelbildes) und dem zweiten roten Kasten im IE sehr viel größer ist als im Firefox (=gewollt). Der Abstand soll idealerweise gleich sein wie der zw. Titelbild und ersten Kasten. Das zweite Manko liegt in der Einrückung des zweiten Kastens von links, diese Einrückung ist etwas weniger als der obere Kasten (um schätzungsweise 2 px) im IE. Idealerweise sollten die beiden Kasten gleich weit von links eingerückt sein (=Firefox). Die Seite ist unter folgendem Link zu finden: http://hanskarl.ha.funpic.de/css/test1.html Die CSS Datei ist unter folgendem Link zu finden: http://hanskarl.ha.funpic.de/css/test1.css Ich bitte jeden, der einen anderen Browser (z.B. Safari) verwendet, dass er einen Test der Seite durchführen möge und mir das Ergebnis poste. Ich hoffe, mir kann jemand helfen.


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

25.04.2007, 11:43
KingCrunch Erfahrener Benutzer Registriert seit: 13.08.2007 Beiträge: 1.976	Hmm ... Muss dein Problem anhand deiner Beschreibung nachvollziehen, da bei meinem IE und FF (beide neuste Version) keine Unterschiede erkennbar sind. Würde aber aussm bauch raus auch auffn Box-Fehler tippen und entweder ne Weiche vorschlagen oder die Seite ohne Zuhilfenahme der kritischen Elemente aufbauen (falls überhaupt möglich ^^). __________________ Nicht jeder Fehler ist ein Bug.

25.04.2007, 19:04
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Warum verschachtelst Du soviele divs ineinander? Vor allem das l_bottom find ich überflüssig. Code: <div id="Laufschrift"> <div id="l_header"></div> <div id="l_content"> <div id="l_content2">die Laufschrift</div> </div> <div id="l_bottom"></div> </div> Ich denke es liegt am l_bottom, versuch mal die schriftgröße auf 2px zu setzen. Beim zweiten Problem handelt es sich um den Three Pixel Text-Jog. Näheres findest Du im Netz, z.B. hier:http://www.positioniseverything.net/...reepxtest.html

25.04.2007, 20:18
hans.karl2 Benutzer Registriert seit: 26.01.2005 Beiträge: 30	Ich verschachtele die Divs, weil ich für den Header ein Bild einbinde, das sich von dem Hintergrundbild des content Divs unterscheidet (selbiges bei bottom). l_content2 ist nun dafür zuständig, dass ein Abstand zum l_content gemacht wird, weil das Hintergrundbild für l_content einen Rahmen enthält (darin soll nicht der Text stehen!). Danke für die Tipps, die Veränderung der Textgröße löste das erste Problem. Für das zweite Problem habe ich einfach das Navigations-div sehr viel größer gemacht und die Lösung im genannten Link verwendet (für Three Pixel Text-jog). Die Größenänderung war notwendig, da (nur der IE6) bei Veränderung des Inhalts der Navigationsleiste die Breitenberechnung falsch machte (war die Navigation genauso hoch wie der rechte Teil, wurde es trotzdem eingerückt -> selber Effekt wie vorher, war die Navigation jedoch kleiner, funktionierte die Änderung). Wie kann ich die Breite eines Divs fix festlegen, egal welchen Inhalt das Div bekommt (Text, Tabellen etc.). Ich habe nämlich des öfteren größere Tabellen als Inhalt und wenn diese die max. Größe überschreiten, zerstört es mein Layout! Eine weitere Frage bezieht sich auf die Effizienz meines erstellten Codes. Ist das bisher erstellte CSS File effizient (gibt es eine einfachere Lösung z.B. mit weniger Divs)? Sieht die Seite in jedem Browser gleich aus (ich bitte alle Personen, die diesen Post lesen und alternative Browser als Firefox und IE6 haben, sich die Seite anzusehen und mir zu posten)? Die Änderungen (zu den Seiten im ersten Post) können unter folgendem Link eingesehen werden: http://hanskarl.ha.funpic.de/css/test2.html Die css-Datei sieht folgendermaßen aus: http://hanskarl.ha.funpic.de/css/test2.css Gibt es eigentlich auch eine Möglichkeit, in diesem Forum Screenshots (die nicht auf einem seperaten Server liegen) einzubinden, ich würde gerne für andere Benutzer, die dasselbe Problem haben, Screenshots zur besseren Anschauung posten (ich möchte die Beispieldateien gerne auf meinem Server löschen)?