✔ Typo3: Designvorlage - Darstellung im IE, FF und Opera jeweils unterschiedlich

  • Themenstarter Themenstarter kollmann84
  • Beginndatum Beginndatum
K

kollmann84

Hallo Leute,

ich habe ein mir unerklärliches Problem mit Typo3 v. 4.1.5. Meine Designvorlage wird im IE, FF und Opera jeweils unterschiedlich dargestellt. (siehe Bilder im Anhang)
Im FF wird es richtig dargestellt, Opera stellt es nahezu richtig dar und der IE total falsch.

1. Bild: IE
2. Bild: FF
3. Bild: Opera

Lokal auf dem PC ohne Einbindung in TYPO3 stellen alle Browser die Designvorlage richtig dar.

Woran kann das liegen? Verarbeitet TYPO 3 da etwas unterschiedlich?
Wie kann man Abhilfe schaffen, so dass alles wie im FF angezeigt wird

Vielen Dank für eure Hilfe!

Im Anhang findet ihr außerdem noch meine Designvorlage als zip-File
 

Anhänge

  • Bild1_IE.jpg
    Bild1_IE.jpg
    18,4 KB · Aufrufe: 132
  • Bild2_FF.jpg
    Bild2_FF.jpg
    28,8 KB · Aufrufe: 123
  • Bild3_Opera.jpg
    Bild3_Opera.jpg
    22,4 KB · Aufrufe: 109
  • WebsiteTYPO3.zip
    WebsiteTYPO3.zip
    19,3 KB · Aufrufe: 38
Hi,

möglicherweise verwendet Typo3 eine andere Doctype-Deklaration, die zumindest den IE in den "Quirksmode"-Darstellungsmodus schaltet.

Was den Darstellungsfehler im Opera betrifft, so würde ich mal an deiner Stelle die Spaltenbreiten mit fixen anstelle der relativen (prozentualen) Angaben festlegen, so wie sie auch in der Grafik "bg.png" existieren, die den Hintergrund für die drei Spalten erzeugt.

Mit diesem Stylesheet erziele ich in den genannten Browsern eine einheitliche Darstellung deiner Designvorlage, die bei mir auch ohne Typo3-Einbindung in ihnen variiert:

Code: 
@charset "ISO-8859-1";
body {
background-image: url(images/nz_bg.png);
text-align: center;
}
#wrapper {
background: #FFF url(images/bg.png) repeat-y;
border: 1px solid #00A050;
background-color: #FFF;
text-align: left;    /* Seiteninhalt wieder links ausrichten */
margin: 10pt auto;      /* standardkonforme horizontale Zentrierung */
width: 850px;
}
#header {
background-color: #008030;
border-bottom: 1px solid #00A050;
height: 130px;
position: relative;
}
#logo {
position: absolute;
left: 0;
top: 0;
}
#language {
position: absolute;
right: 150px;
top: 0;
}
#search {
position: absolute;
right: 0;
top: 0;
}
#header_menu {
position: absolute;
right: 0;
bottom: 0;
}
#l_sidebar {
float: left;
overflow: hidden;
width: 170px;
margin-right:0;
}
* html #l_sidebar {
margin-right:-3px;
}
#r_sidebar {
float:right;
overflow: hidden;
width: 277px;
margin-left:0;
}
* html #r_sidebar {
margin-left:-3px;
}
#content {
margin: 0;
overflow: hidden;
}
* html #content {
height: 1%;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
margin: 0 274px 0 167px;
}
#path {
background-color: #7DC188;
border-bottom: 1px solid #005F00;
border-left: 1px solid #005F00;
}
#footer {
background-color: #008030;
border-top: 1px solid #00A050;
clear: both;
}
 
.....und wie du Recht hast Maik! Held! ;)

es liegt am doctype

Opera gerneriert die Seite nämlich mit diesem doctype:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Ich aber nutze ja HTML version 4.01.

Wenn ich HTML Version 4.0 nutze, wie Typo3, tauchen die Probleme auch ohne Einbindung in Typo3 auf.

Jedoch weiß ich jetzt nicht ob man den doctype in Typo3 ändern kann und wenn wie?
 
Ich kenne mich mit Typo3 nicht aus, aber der Dokumenttyp ist sicherlich in einem der Templates festgelegt, und lässt sich dort dann auch umschreiben.
 
Joa Maik, das habe ich auch schon durch googlen gefunden.

Ich muss Typo3 ja aber auf HTML v 4.01 umstellen und nicht auf xhtml.

Bin die ganze Zeit auf der Suche nach der passenden config, aber irgendwie gibt es keine Lösungen zu meinem Problem. :-/
 
Du musst nicht zwingend auf "HTML 4.01" umstellen, sondern lediglich einen Dokumenttyp wählen, der das Dokument den Browsern im "Standardsmode" übergibt.

Das wären dann in der Typo3-Konfiguration xhtml_trans:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
oder xhtml_strict:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
Danke danke danke danke danke.... ich kann es nicht oft genug wiederholen.

Es funktioniert! :D

Man man man... jetzt kann ich glücklich nach Hause fahren :)

Danke Maik
 
In Typo3 gibt es außerdem den Doktype-Switch mit dem man über eine Condition die Schreibweise für den IE richtig stellt, damit dieser nicht in den Quriklsmode wandert ;)

PS: Das mit der Condition und dem Prologue ist mir auch neu! danke für den Link!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück