Problem mit CSS-Designvorlage in IE

Roger80 · 30. März 2008 17:00

Hallo zusammen

Ich habe ein Problem, meine Seite wird im IE komplett auseinander gezogen. Im FF werden dafür die Pictures nicht angezeigt. Ich kriege langsam die Krise. #angry#
Als ich die Designvorlage erstellt habe, hat im IE und im FF alles paletti ausgesehen. Als ich die Designvorlage anschliessend in den Folder fileadmin importiert habe, hat nichts mehr geklappt. Hier noch mein CSS und HTML Code.
Hoffe jemand kann helfen...

HTML Code:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- 
	This website is brought to you by TYPO3 - get.content.right
	TYPO3 is a free open source Content Management Framework created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2005 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://www.typo3.com
-->

	<style type="text/css">
		/*<![CDATA[*/
	<!--
	/* default styles for extension "tx_mininews_pi1" */
	.tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-title { font-weight:bold; }
	.tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-teaser { margin-bottom:15px; }
	.tx-mininews-pi1 .tx-mininews-pi1-fp_listrow P.tx-mininews-pi1-fp_listrowField-title { font-weight:bold; }
	.tx-mininews-pi1 .tx-mininews-pi1-fp_listrow P.tx-mininews-pi1-fp_listrowField-teaser { margin-top:0px; margin-bottom:10px; }
	.tx-mininews-pi1 .tx-mininews-pi1-singleView P.tx-mininews-pi1-singleViewField-teaser { font-style:italic; margin-top:5px; margin-bottom:10px; }
	.tx-mininews-pi1 .tx-mininews-pi1-browsebox P SPAN.tx-mininews-pi1-browsebox-strong { font-weight:bold; }
	.tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-teaser A { color:black; text-decoration:none; }
	.tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-teaser A:hover { color:black; text-decoration:none; }
	-->
		/*]]>*/
	</style>
	<link rel="stylesheet" type="text/css" href="fileadmin/css/style.css" />
	<title>Home</title>
	<meta name="generator" content="TYPO3 3.8 CMS" />
	<meta name="AUTHOR" content="Roger Böhlen" />
	<meta name="DESCRIPTION" content="Sherins Kosmetikseite" />
	<script type="text/javascript">
		/*<![CDATA[*/
	<!--
		browserName = navigator.appName;
		browserVer = parseInt(navigator.appVersion);
		var msie4 = (browserName == "Microsoft Internet Explorer" && browserVer >= 4);
		if ((browserName == "Netscape" && browserVer >= 3) || msie4 || browserName=="Konqueror" || browserName=="Opera") {version = "n3";} else {version = "n2";}
			// Blurring links:
		function blurLink(theObject)	{	//
			if (msie4)	{theObject.blur();}
		}
		
	// -->
		/*]]>*/
	</script>


</head>
<body bgColor = "#FFFFFF">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<link rel="stylesheet" href="css/style.css"
        type="text/css" />
		<title>Sherin Cosmetics</title>
	</head>
	<body>
	<!-- ###DOKUMENT### begin -->
		<div id="main" >
			<!--Level1-->
			<div id="level_1_left" style="margin:auto;text-align:left"></div>
			<div id="level_1_logo"><img src="pictures\logo.jpg" class="logopicture"></div>
			<div id="level_1_navigation">###NAVIGATION###</div>
			<!--Level2-->
			<div id="level_2_left"></div>
			<div id="level_2_bordertop"></div>
			<div id="level_2_right"></div>
			<!--Level3-->
			<div id="level_3_left"></div>
			<div id="level_3_borderleft"></div>
			<div id="level_3_content">###CONTENT###</div>
			<div id="level_3_borderright"></div>
			<div id="level_3_right"></div>
			<!--Level4-->
			<div id="level_4_left"></div>
			<div id="level_4_borderbottom"></div>
			<div id="level_4_right"></div>
			<!--Level5-->
			<div id="level_5_left"></div>
			<div id="level_5_footer"><img src="fileadmin\pictures\footer.jpg"></div>
			<div id="level_5_right"></div>
		</div>
	<!-- ###DOKUMENT### begin -->
	</body>
</html>

</body>
</html>

CSS Code:

/* CSS Document */

/**Text- und Bildklassen*/

.logopicture 
{
display:block;
padding-top: 45px;
line-height: 100%;	
}

.bodytext
{
	color: #353535;
	background-color: White;
	font-family: sans-serif;
	font-size: 12px;
}

.title
{
	color: #353535;
	background-color: White;
	font-family: sans-serif;
	font-size: 14px;
	font-style: bold;
	font-weight: bold;
}


/**Hauptbereiche*/
body{
	text-align:center;
	background-color: White;
}

div{
	background-color: White;
	width: 1024px;
	height: 768px;
	margin: auto;
}

div div {
	background-color: #ffb;
}

#div_main{
}

#level_1_left {
	background: white;
	width:206px;
	height: 256px;
	position: relative;
	left:-409px;
	top:0px;
}

#level_1_logo
{
	margin: auto;
	background: white;
	width:612px;
	height: 256px;
	position: relative;
	left:0px;
	top:-256px;
	margin: 0 auto;
	text-align: left;

}

#level_1_navigation
{
	margin: auto;
	background: white;
	width:206px;
	height: 256px;
	position: relative;
	left:409px;
	top:-512px;
	margin: 0 auto;
	text-align: left;
}

#level_2_left
{
	margin: auto;
	background: white;
	width:205px;
	height: 1px;
	position: relative;
	left:-409px;
	top:-512px;
	margin: 0 auto;
	text-align: left;
}

#level_2_bordertop
{
	margin: auto;
	background: #4C0707;
	width:614px;
	height: 1px;
	position: relative;
	left:0px;
	top:-513px;
	margin: 0 auto;
	text-align: left;
}

#level_2_right
{
	margin: auto;
	background: white;
	width:205px;
	height: 1px;
	position: relative;
	left:410px;
	top:-514px;
	margin: 0 auto;
	text-align: left;
}

#level_3_left
{
	margin: auto;
	background: white;
	width:205px;
	height: 340px;
	position: relative;
	left:-409px;
	top:-514px;
	margin: 0 auto;
	text-align: left;
}

#level_3_borderleft
{
	margin: auto;
	background: #4C0707;
	width:1px;
	height: 340px;
	position: relative;
	left:-306px;
	top:-854px;
	margin: 0 auto;
	text-align: left;
}

#level_3_content
{
	margin: auto;
	background: white;
	width: 612px;
	height: 340px;
	position: relative;
	left:0px;
	top:-1194px;
	margin: 0 auto;
	text-align: left;
}

#level_3_borderright
{
	margin: auto;
	background: #4C0707;
	width: 1px;
	height: 340px;
	position: relative;
	left:307px;
	top:-1534px;
	margin: 0 auto;
	text-align: left;
}

#level_3_right
{
	margin: auto;
	background: white;
	width: 205px;
	height: 340px;
	position: relative;
	left:410px;
	top:-1874px;
	margin: 0 auto;
	text-align: left;
}

#level_4_left
{
	margin: auto;
	background: White;
	width:205px;
	height: 1px;
	position: relative;
	left:-409px;
	top:-1874px;
	margin: 0 auto;
	text-align: left;
}

#level_4_borderbottom
{
	margin: auto;
	background: #4C0707;
	width:614px;
	height: 1px;
	position: relative;
	left:0px;
	top:-1875px;
	margin: 0 auto;
	text-align: left;
}

#level_4_right
{
	margin: auto;
	background: white;
	width:205px;
	height: 1px;
	position: relative;
	left:410px;
	top:-1876px;
	margin: 0 auto;
	text-align: left;
}

#level_5_left
{
	margin: auto;
	background: white;
	width:205px;
	height: 170px;
	position: relative;
	left:-409px;
	top:-1876px;
	margin: 0 auto;
	text-align: left;
}

#level_5_footer
{
	margin: auto;
	background: white;
	width:614px;
	height: 170px;
	position: relative;
	left:0px;
	top:-2046px;
	margin: 0 auto;
	text-align: left;
}

#level_5_right
{
	margin: auto;
	background: white;
	width:205px;
	height: 170px;
	position: relative;
	left:410px;
	top:-2216px;
	margin: 0 auto;
	text-align: left;
}

[/url]

Michaelh74 · 30. März 2008 18:40

Ehrlich gesagt ist mir

meine Seite wird im IE komplett auseinander gezogen

etwas zu pauschal um mir ernsthaft Gedanken über diese Problem zu machen.

Allerdings solltest Du Dir Deinen Quelltext einmal genau ansehen und Du wirst feststellen, daß da ZWEI header Bereiche drin sind und ZWEI unterschiedliche Doktypes. So kann das auch nichts werden...

Setze in Deinem HTML Template den Document subpart direkt nach dem Body Tag öffnen und vor den Body Tag schließen. Vielleicht hilft das ja schon.

Gruß
Michael

Roger80 · 30. März 2008 22:39

Ok, das Problem war wirklich der 2te Doctype...im IE und FF funzt nun soweit alles... Besten Dank...