✔ Typo3 lässt Layout fehlerhaft werden

  • Themenstarter Themenstarter Gast170816
  • Beginndatum Beginndatum
G

Gast170816

Hallo,

ich habe eine "HTML-strict"-Seite erstellt, und sie in Typo3 eingebunden.
Vor der Typo3-Einbindung war sie w3c-valide und in IE und FF richtig dargestellt.
nach der Typo3-Einbindung war sie zwar immernoch w3c-valide, aber im IE nicht mehr richtig dargestellt (in Firefox ja).

Jetzt ist z.B. die horizontale Navigation nach unten gerutscht und die komplette Seite ist auch nicht mehr wie vorher zentriert, sondern linksbündig.

Sie ist also valide geblieben, aber die Seite sieht im IE auf einmal doch fehlerhaft aus. Typo3 fügt ja hier und da auch noch seine eigenen Sachen ein... vielleicht liegt das da dran?!

Ich wollte fragen, ob jemandem, der sich mit Typo3 gut auskennt sowas bekannt ist und was ich da jetzt machen soll...
Muss man in Typo3 nur irgendwas ganz kleines ändern oder sollte ich in die CSS bei allen fehlerhaften Elementen spezielle IE-Anweisungen reinschreiben?

Wie schreibt man das dann genau?
Also z.B. wenn ich NUR die verschobene Navigation zurecht rücken will. Ich würde dann z.B. irgendwie ein paar IE-spezifische padding- & margin-Befehle hinzufügen wollen. (Wie muss man diese Hacks darstellen/reinschreiben?)
Oder sollte man die selbe CSS-Datei nochmal erstellen nur mit den spezifischen Änderungen und dann mit diesem "if IE6"-Befehl/Kommentar oben im Head-Bereich einfügen?

Infohalber habe ich nachfolgend noch den HTML-Code der Seite, die dann nach Typo3 entsteht und die schließlich fehlerhaft aussah:
HTML: 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- 
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2008 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.com/ and http://typo3.org/
-->

	<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_e128ab205e.css" />

	<meta name="language" content="de" />
	<meta name="author" content="" />
	<meta name="copyright" content="" />

	<link href="fileadmin/templates/css/basic.css" rel="stylesheet" type="text/css" media="all" />
	<link href="fileadmin/templates/css/navigation.css" rel="stylesheet" type="text/css" media="all" />

	<title>caseF</title>
	<meta name="generator" content="TYPO3 4.2 CMS" />
	<script type="text/javascript" src="typo3temp/javascript_93077bb238.js"></script>

</head>
<body class="techno" >

                <div id="container">
                <div id="header">
                                 <div id="hdTop">

                                  <div id="navTop"><ul><li id="p91"><a href="index.php?id=91"  >Start</a></li><li id="p96"><a href="index.php?id=96"  >Contact</a></li><li id="p93"><a href="index.php?id=93"  >Sitemap</a></li></ul></div>
                                 </div>
                         <div id="hdMenu"><ul id="menu"><li><a href="index.php?id=99" title=" (ALT+W)"   accesskey="W">Welcome</a></li><li><strong><a href="index.php?id=100" title=" (ALT+S)"   accesskey="S">Case</a></strong></li><li><a href="index.php?id=96" title=" (ALT+C)"   accesskey="C">Contact</a></li><li><a href="index.php?id=94" title=" (ALT+I)"   accesskey="I">Impressum</a></li></ul></div>

                </div>
                        <div id="content">
                        <div id="mainContent" class="highlight"><!--TYPO3SEARCH_begin--><!--TYPO3SEARCH_end--></div>
                        <div id="sidebarLeft" class="highlight"><ul id="casemenu"><li id="p103" class="mir"><a href="index.php?id=103" title=" (ALT+A)"   accesskey="A">caseA</a></li><li id="p104" class="mir"><a href="index.php?id=104" title=" (ALT+E)"   accesskey="E">caseB</a></li><li id="p105" class="mir"><a href="index.php?id=105"  >caseC</a></li><li id="p108" class="mir"><a href="index.php?id=108" title=" (ALT+D)"   accesskey="D">caseD</a></li><li id="p107" class="mir"><a href="index.php?id=107"  >caseE</a></li><li id="p106act" class="mir"><strong>caseF</strong></li></ul></div>


                        <div class="clearfloat"></div>

                        </div>
                        <div id="footer"><p>&copy; 2008 </p></div>
                </div>
        
</body>
</html>

PS:
Am deutlichsten fällt mir unter anderem das auf
HTML: 
<meta name="generator" content="TYPO3 4.2 CMS" />
	<script type="text/javascript" src="typo3temp/javascript_93077bb238.js"></script>
Kann dieses script von Typo3 verantwortlich sein, dass Sachen verrutschen oder was nicht mehr zentriert ist?

Vor Typo3, als alles richtig aussah, sah auch der Code so aus:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title></title>
                <meta name="language" content="de" />
                <meta name="author" content="" />
                <meta name="copyright" content="" />
                <link href="basic.css" rel="stylesheet" type="text/css" media="all" />
                <link href="navigation.css" rel="stylesheet" type="text/css" media="all" />
          </head>

        <body class="techno" >
                <div id="container">
                <div id="header">
                                 <div id="hdTop">

                                  <div id="navTop">
                                    <ul>
                                     <li id="home" ><a href="#">Home</a></li>
                                      <li id="kontakt" ><a href="#">E-Mail</a></li>
                                      <li id="sitemap" ><a href="#">Sitemap</a></li>
                                    </ul>
                                 </div>
                                 </div>
                         <div id="hdMenu">
                         <ul id="menu">
                                 <li><a href="index.html">Start</a></li>
                                 <li><a href="index.html">Case</a></li>
                                 <li><a href="index.html">Whatever_3</a></li>
                                 <li><a href="index.html">Jobs</a></li>
                                 <li><a href="index.html">Contact</a></li>
                         </ul>
                 </div>
                </div>
                        <div id="content">
                        <div id="mainContent" class="highlight">
                         </div>

                        <div id="sidebarLeft" class="highlight"><h2>Aktuelle Themen <span 
                        </div>


                        <div class="clearfloat"></div>
                        </div>

                        <div id="footer">
                               <p> - &copy; 2008</p>
                        </div>
                </div>
        </body>

</html>
 
Hi,

die Ursache liegt hier schlichtweg im XML-Prolog vor der Doctype-Deklaration, den Typo3 dir da unterjubelt, denn dadurch schaltet der IE6 in den "Quirksmodus" (siehe hierzu auch Quirks Mode), in dem er u.a. das "CSS-Boxmodell" falsch bzw. garnicht interpretiert, wie z.B. die horizontale Zentrierung der Seite:

Code: 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Lösung: Die Ausgabe dieser nicht zwingend erforderlichen Deklaration im Typo3-Backend deaktivieren, bevor du dir nun dabei die Finger brichst, alle daraus resultierenden Fehlinterpretationen des IE6 im CSS-Code zu fixen.

mfg Maik
 
Vielen Dank!!

Durch den Tipp "xml-prolog" konnte ich jetzt im iNet diesen Typoscript-Schnipsel finden:
Code: 
[browser = msie]
xmlprologue = none
[global]

Den hab ich in ein TS eingefügt, wo ich z.B. auch per
Code: 
doctype = xhtml_strict
Den Doctype vorher schon festgelegt hatte.
Es müsste doch jetzt funktionieren (hatte es auch probiert, dieses "browser=msie" wegzulassen)?!... na aber jedenfalls bleibt der Quellcode unverändert (& die Darstellung).

Muss ich noch irgendwas machen?
Soll ich in den Templates nochmal "create DS/TO" machen?

Ich frage das vorher, bevor ich mir jetzt irgendwas kaputt mache.

PS: Das Ganze steht in Klammern in
Code: 
config { }
 
Zuletzt bearbeitet von einem Moderator:
Komisch, nu gehts...

Ich hatte vorher meine Startseite auf "verstecken" und habe mir die Unterseiten einfach übers Anhängen der jeweiligen Seiten-ID angeguckt.
Jetzt hab ich nochmal bewusst die Startseite "unhide" gemacht und nu gehts.

Toll!

Danke!!
 
Ich möchte den Thread noch etwas abrunden..

Ich mach das folgenderweise:

Code: 
// Reihenfolge von Doctype und XML-Prolog beim Internet Explorer tauschen (wegen Bug) 

[browser = msie]
  config.doctypeSwitch = 1
[else]
  config.doctypeSwitch = 0
[end]

DO/TS musst du nicht neuerstellen, da dies nur Typoscript ist, und nichts am TemplaVoila Template ändert ;)

Auch ist darauf zu achten, dass Conditions nie innerhalb geschwungenen Klammern stehen darf.
 
Ok, ich kann das ja nochmal so ergänzen.

Allerdings... irgendwo hatte ich gelesen, dass man nicht "doctypeswitch" verwenden soll, weil das nicht valide wär?


Mich wundert, dass schon mit meiner Variante das nicht ausschließlich für IE gilt, sondern in Firefox der xmlprolog einfach auch mit ausgeschalten ist.
 
Hm... eigenartig. Die Seiten sind eigentlich valide im W3C Checktool bei mir.
Wie sieht dein jetziges Typoscript aus? Würde mich interessieren.
 
also bei mir stehen die config-Sachen in geschweiften Klammern.
Es steht dann also (neben anderem Blabla, wie z.B. strict, blabla...


Code: 
config {
[browser = msie]
xmlprologue = none
[global]
}

danach folgen dann noch andere Sachen, die ich vorher schon drinstehen hatte.
Meine Codevariante hab ich irgendwo gefunden und eingefügt, es funktioniert auch, aber der xml-Prolog ist AUCH im firefox weg... ich dachte, das gilt in dieser Schreibweise NUR für IE.
Dass man "doctypeswitch" nicht nehmen soll, hab ich nur irgendwo gelesen. Aber ich habe selbst das nicht ausprobiert.

Ich will deinen Tip aber trotzdem nochmal ausprobieren (bin ich noch nicht dazugekommen *hüstel*)... so in der Schreibweise "if else" ist das vielleicht so auch logischer, dass für IE "an" und ansonsten "aus" gilt.
BRAUCHEN tut man den die "xml-prolog" Zeile nicht oder?! Bin kein Programmierfreak, deshalb hatte ich das anfangs nur beheben wollen, weil mein Layout im IE kaputt war...
 
Fantasmo hat gesagt.:
BRAUCHEN tut man den die "xml-prolog" Zeile nicht oder?! Bin kein Programmierfreak, deshalb hatte ich das anfangs nur beheben wollen, weil mein Layout im IE kaputt war...
Zum Vergrößern anklicken....
Die Frage beantwortet dir mein eingangs empfohlener Link:

Wenn in einem XHTML-Dokument nicht UTF-8 als Zeichenkodierung verwendet werden soll, so kann es notwendig werden, eine XML-Deklaration mit der entsprechenden Zeichenkodierung anzugeben:

Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Allerdings erwartet der Internet Explorer 6 die Dokumenttyp-Deklaration am Beginn des HTML-Codes. Dies führt dazu, dass der Internet Explorer 6 bei Verwendung einer XHTML-Dokumenttyp-Deklaration mit XML-Deklaration in den Quirks Mode schaltet. Opera hat diesen Bug in den Versionen 7.0 bis 7.03 imitiert. Ab Version 7.1 verhält sich Opera richtig und schaltet in den Standards Mode. Im Internet Explorer 7 wurde dieser Bug teilweise beseitigt. Dieser Browser schaltet bei Angabe einer XML-Deklaration nur dann in den Quirks Mode, wenn vor der XML-Deklaration bzw. zwischen XML-Deklaration und Doctype-Deklaration ein Kommentar steht.

Wenn die Zeichenkodierung bereits im Header der HTTP-Antwort des Webservers genannt wird, so kann auf die Nennung der Zeichenkodierung im XHTML-Code verzichtet werden. Die Verwendung der für den Internet Explorer problematischen XML-Deklaration kann somit vermieden werden.
Zum Vergrößern anklicken....

mfg Maik
 
Also im <head> steht in <meta> utfj-8... das ist das dann?!
Und auch so sieht ja letztendlich bei mir alles aus wie gewollt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück