Layoutfehler nach mappen mit TV!

hey Leute,

mein Problem ist, dass sich nach dem mappen mit TV! das Layout im IE total verschiebt. Davor war mein Template 100% valid mit beiden Browsern (also FF und IE) und jetzt zeigt der FF immer noch alles richtig an aber nicht mehr der IE. Das Problem hatte ich schon mal gepostet, aber aufgrund fehlenden Anschauungsmaterialien konnte mir nicht weiter geholfen werden. Darum habe ich mich gekümmert und hoffe jetzt auf Hilfe 😃

Hier ist der Link ( bitte in FF und IE angucken):

http://hans.lvps80-86-93-102.mein-webperoni.de/typo3/

Name: Hans
PW: Yoshimitu88

Und hier der Quellcode der gemappten Template Datei:

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html>
<head>
<title>Fahrschule und Busbetrieb Holger Krüger</title>
<link rel="stylesheet" type="text/css" href="ssfhkklein.css" />


</head>
<body>

<div id="header">
<a href="#" class="example">Login</a>
</div>

<div id="headline">
		<span class="headline">Fahrschule und Busbetrieb Holger Krüger</span>
</div>

<div id="mainmenu">
	
		<a href="#">Startseite </a>
		<a href="#">Über uns</a>
		<a href="#">F-Klassen </a>
		<a href="#">Schulungsfzg</a>
		<a href="#">Fahren mit 17</a>
		<a href="#">Kontakt</a>
		<a href="#">Busbetrieb</a>
		<a href="#">Fahrtrainer</a>
		<a href="#">Siegerbilder</a>
		<a href="#">Impressum</a>
</div>

<div id="content">
	
	<h1> Überschrift H1 </h1>
	<h2> Überschrift H2 </h2>
	<h3> Überschrift H3 </h3>
	<h4> Überschrift H4 </h4>
	<p>
	TEXT 
	</p>
	 
</div>

<div id="footer">
	
</div>
<p style="text-align:center;font-size:9px;color:#666;">©2007 Fahrschule und Busbetrieb Holger Krüger</p>

</body>
</html>

und die CSS Datei:

body {
	width:800px;
	margin:5px auto;
	text-align:left;
	background-color:#bdbec6;	
	font-family:Verdana, Arial, Helvetica, sans-serif;;
 	font-size:12px;
}

h1 {
	font-size:22px;
}

h2 {
	font-size:20px;
}

h3 {
	font-size:18px;
}

h4 {
	font-size:16px;
}

p,h1,h2,h3,h4,h5,h6,img {
	margin:10px;
}

.headline {
	font-size:32px;
	margin-left:50px;
}

a.example {
	float:right;
	font-size:9px;
	color:black;
}

#header {
	height:80px;
	padding:5px;
	background-image: url(imageklein/header.jpg);
	border-bottom:1px solid #666;
}

#headline {
	background-image: url(imageklein/headline.jpg);background-repeat:no-repeat;
	height:44px;
	border-bottom:1px solid #666;
	
	
}

#mainmenu {
	background-image: url(imageklein/navigation.jpg);
	width:149px;
	height:478px;
	float:left;
	border-right:1px solid #666;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:auto;
	padding-top:20px;
	
}

#mainmenu a {
	display: block;
	padding: 0.5em;
   	font-weight: bold;
	text-align:center;
	text-decoration:none;
	border:1px solid #666;
	margin-top:10px;
	margin-right:20px;
	
		
}

#mainmenu a:link {
    color: #666; border-left:5px solid #00ccff;
}
#mainmenu a:visited {
    color: #666; border-left:5px solid #666;
}
#mainmenu a:hover {
    color: black; background-color:#00ccff ; border-left:5px solid #666;
}
#mainmenu a:active {
    color: black; border-left:5px solid #666;
}


#content{
	background-image: url(imageklein/fertig.jpg);
	width:650px;
	height:498px;
	float:right;
	overflow: auto;
	
}

* html #content {
        background-attachment: fixed;
}

#footer {
	width:790px;
	height:95px;
	padding:5px;
	background-image: url(imageklein/footer.jpg);
	border-top:1px solid #666;
	float:left;
	margin-bottom:10px;
}

Ich selbst habe wirklich überhaupt keine Ahnung woran das liegen könnte, also kann ich nur hoffen und beten, dass einer von euch ne Idee hat!

Vielen Dank für eure Unterstützung!
Hans

Benutzername/PW stimmen nicht,
daher läßt sich die Seite nicht "begutachten".
Es wird wohl aber, wie fast immer, ein unterschiedlicher doktype sein ;-)

Name: hans
PW: Yoshimitsu88

jetzt aber 😃

Hallo,

habe die Seite einmal lokal angeschaut mit deinem Code aus dem Post und einmal im Web. Die lokale Version sieht richtig aus, die im Web hingegen falsch. Der einzige Unterschied, den ich beim Vergleich sehe ist der, dass du im Original XHTML strict verwendest, im Web aber HTML 4 Transitional. Der IE macht da beim Rendern anscheinend einen Unterschied. Ändern das mal!

Silkea

Hey du hast Recht. Das ist der Grund für die unterschiedliche Darstellung!
Jetzt ist natürlich die Frage, warum TV! das macht und wo ich Typo3 bzw TV! den gewünschten Doctype vorschreiben kann. Ich verwende

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">

und damit siehts in allen Browsern richtig aus. nach dem mappen is der Doctype allerdings folgender:

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

ohne dass ich selbst etwas verändert habe. Wie kann das umstellen oder muss ich das komplette Layout untrer html 4.0 transitional nochmal schrieben ? Das wäre die aufwendigste Variante 🙁 Vlt. weiß ja einer von euch wo ich den Doctype typo3 oder TV! befehlen kann, weil ganz offensichtlich ändert er es automatisch.
Thx
Hans 😃

Hallo Hans,

diese Einstellung macht Typo3 wohl als default. Trage in die Root-Page folgendes TS ein:

config {
    # strict
    doctype = xhtml_strict

    # kein <?xml... ?>-Prolog
    xmlprologue = none
    
    # XHTML Cleaning aktivieren
    xhtml_cleaning = all
    
    # <html lang="de" xml:lang="de"> auf de setzen
    htmlTag_langKey = de
}

Das sind die Einstellungen, die ich verwende (ich benutze auch nur noch XHTML strict). Cleaning und Spracheinstellung brauchst du nicht, ist aber sicher kein Fehler, die da drin zu haben.

Gruß,
Silkea

verdammt! Es hat geklappt! Ich sah mich schon mein Projekt aufgeben zu müssen weil ich 1. keine Ahnung hatte woran das Layoutproblem lag und 2. wie ich es hätte lösen sollen. 1000 Dank für deine wertvolle Hilfe Silkea !! 😃

Vielen Dank
Hans