Zum Inhalt springen

Darstellungsfehler im IE: Content-Element Text m/Bild

Erstellt am 22. August 2008 · 6 Antworten · letzte Antwort am 22. August 2008

Tags: Inhaltselemente, HTML & CSS, Frage

Davy33 ·

Hallo zusammen

Ich hab hier ein kleines Problemchen, vielleicht kennt das auch schon jemand und hat ein Lösung für mich.

Ich verwende auf einer Seite mehrere Container des Typs Text m/Bild mit der Bild-Einstellung "kein Umbruch, neben dem Text links". Im Firefox und auch im Safari wurden diese so korrekt dargestellt. Im Internet Explorer jedoch teilweise nicht. Hier erschien manchmal zuerst das Bild links und dann erst darunter der Text rechts (wie wenn beides in unterschiedlichen Zeilen stecken würde). Das irritierende war, das völlig identisch eingestellte Container eine unterschiedliche Darstellung zur Folge hatten (die einen waren korrekt dargestellt, die anderen nicht). Dazu kam, das sich das Problem teilweise löste, sobald ich im Textfeld (ohne RTE) die Markierungen für kursiv <i> gelöscht hatte.

Das Verhalten des IE ist mir ein Rätsel. Kommt noch dazu, das ich als Mac-User nicht mehr auf einen aktuellen IE zurückgreifen kann (bei meiner älteren Version sieht das ganze noch viel schlimmer aus) und immer zuerst einen PC suchen muss, um meine Einträge zu überprüfen. Sehr mühsam.

Kennt das jemand?

Vielen Dank im Voraus für Hinweise.

Unbekannter Benutzer ·

Verwendest du einen ordnetlichen Doctype?
Für mich hört sich das so an, als wenn es in deinem CSS ein float Problem gäbe... hast du vielleicht ein float nicht aufgehoben?

Davy33 ·

Hmm, ich bin leider eher den Typo3-Anfängern zuzurechnen, dasselbe gilt auch für CSS.
Mein CSS sieht so aus:

p { color: #006; font-size: 14px; line-height: 17px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
h1 { color: #006; font-size: 15px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
h2 { color: #006; font-size: 15px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; border-bottom: 2px solid #fec031 }
h3 { color: #006; font-size: 15px; line-height: 20px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffeba9; text-indent: 5px }
i { font-style: italic }
.navi1 { color: #006; font-weight: bold; font-size: 16px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; vertical-align: middle; margin-top: 2px; margin-right: 8px; margin-left: 8px }
.navi4 { color: #fffaea; font-weight: bold; font-size: 18px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; vertical-align: middle }
.navi3 { color: #006; font-weight: bold; font-size: 18px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; vertical-align: middle; margin-top: 2px; margin-right: 5px; margin-left: 5px }
.navi2 { color: #006; font-weight: bold; font-size: 15px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; list-style-type: none; margin-bottom: 5px; margin-left: 6px }
.csc-textpic-caption { color: #006; font-size: 14px; line-height: 20px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; padding-bottom: 15px }
.csc-frame-rulerAfter { border-bottom: 2px solid #ffeba9 }

Bringt das was? Oder ist was anderes gemeint?

Unbekannter Benutzer ·

Nein, das bringt rein gar nichts...
Aber auf den ersten Blick sehe ich das am Ende jeder Zeile das Semikolon fehlt.Das wird aber wohl nicht die Lösung des Problems sein...

Was verwendest du denn? content(default) oder cSet oder css_styled_contend? Was hast du denn in deinem Roottemplate inlcudiert?
Was für einen Doctype verwendest du?

Davy33 ·

Erst mal vielen Dank für die schnelle Antwort, das ist wirklich cool.

Ich verwende beim statischen "content (default) und aus den Erweiterungen "css_styled_content".

Was ein Doctype ist, weiss ich leider nicht.

Unbekannter Benutzer ·

OK, content(default) schmeißt du raus... beides geht nicht und css_styled_content lässt du drinn...

Dann schreibst du in dein TS-Template Setup der rootseite das ganz nach unten:

config {
        doctype = xhtml_trans
	xhtml_cleaning = all
}
[browser = msie] && [version = < 7.0]
config.doctypeSwitch = 1
[global]

Und zwar ganz nach unten. Das darf nicht innerhalb von geschweiften Klammern stehen. Also einfach kopieren und ganz nach unten setzen.

Dann löscht du alle Chaches und lädst die Seite im Frontend neu.
Dann machst du einen Rechtsklick im Frontend irgendwo und lässt dir den Quelltext anzeigen.

Im Firefox sollte nun ganz oben der xHTML-Doxtype erscheinen:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">