Unterschiede IE, Firefox bei der Darstellung von CSS

Hey,

ich bin gerade dabei, eine HTML-Datei mit einer CSS Datei zu erstellen, die ich dann ins TS einbinden kann.
Mein Problem ist aber, dass das Layout im Firefox genauso angezeigt wird, wie ich´s eigentlich haben will und im IE sieht es komplett anders aus. Was kann ich dagegen machen?

<html>
<head>
<title></title>
<meta name="author" content="Christian Böhm">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

  <div id="page">
  	<div id="logo" >
    		###TOP_LOGO###
	</div>
	<div id="main_menu">
		###MAIN_MENU###
	</div>
	<div id="navigation">
		###NAVIGATION###
       	</div>
         <div id="content">
		###CONTENT###
	</div>

	<div id="sub_menu">
		###SUB_MENU###
	</div>

	<div id="copyline">
		###COPYLINE###
     	</div>
   </div>

</body>
</html>

CSS_datei:

div#Page{
 text-align: left;
 margin: 0 auto;
 width: 1024px;
 padding: 0em;
 max-width: 1024;
 background-color: rgb(300, 400, 500);


}

div#logo{
 width: 1024px;
 height: 100px;
 background-color: rgb(100, 200, 200);
 left: 10px;
}

div#main_menu{
 width: 1024px;
 height: 20px;
 background-color: rgb(300, 324, 123);
 left: 10px;

}

div#navigation{
 width: 147px;
 height: 60px;
 background-color: rgb(109, 433, 383);
 left: 10px;
 float:left;

}

div#content{
 width: 850px;
 min-height: 480px;
 background-color: rgb(200, 200, 200);
 float:right;


}

div#sub_menu{
 width: 147px;
 height: 480px;
 background-color: rgb(139, 200, 200);
 left: 10px;

}

div#copyline{
 width: 1023px;
 height; 20px;
 background-color: rgb(212, 420, 594);
 left: 10px;

 clear:both;
    font-size: 0.9em;
    margin: 0;
    text-align: center;
    background-color: #fed; border: 1px solid silver
 }

gruß
christian

stimmt denn der doctype vom template und vom ergebnis überein?

Ja, der stimmt überein. Es ist selbst so, wenn ich den CSS Code direkt in die HTML-Datei einbinde und mir die dann anschau.

Naja wenn das template im IE schon falsch ausschaut, dann hat das ja relativ wenig mit TYPO3 zu tun sondern mit CSS + HTML

die experten dafür sind u.a. auf xhtmlforum.de unterwegs

georg

Ich habe die beiden Dateien jetzt so angepasst, dass sie sowohl im IE 7, als auch in Firefox 2 gleich aussehen. (ohne Typo3)

Binde ich diese Dateien aber in Typo3 ein, zeigt der IE 6 trotzdem etwas anderes an, als der Firefox. Wie kann ich es nun erreichen, dass selbst IE´s < Version 6 das so anzeigen, wie im firefox? Doctypes sind auch definiert: http://www.volk-transport.de

HTML:

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


<html>
<head>
<title></title>
<meta name="author" content="Christian Böhm">



<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lte IE 7]>
  <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>

<body>
  <div id="page">
  	<div id="logo">
    		###TOP_LOGO###
	</div>
	<div id="main_menu">
		###MAIN_MENU###
	</div>
	<div id="navigation">
		###NAVIGATION###
       	</div>
         <div id="content">
		###CONTENT###
	</div>

	<div id="sub_menu">
		###SUB_MENU###
	</div>

	<div id="copyline">
		###COPYLINE###
     	</div>
   </div>

</body>
</html>

CSS 1:

div#page{
 display;block;
 text-align: left;
 margin: 0 auto;
 width: 1024px;
 padding: 0em;
 max-width: 1024px;
 background-color: rgb(255, 255, 255);


}

div#logo{
 display:block;
 width: 1024px;
 height: 100px;
 padding: 0em;
 background-color: #fed;
 border: 1px solid silver;
}

div#main_menu{
 display:block;
 width: 1024px;
 height: 20px;
 background-color: rgb(254, 226, 067);


}

div#navigation{
 display:block;
 width: 147px;
 height: 60px;
 background-color: rgb(126, 173, 250);
 float:left;


}

div#content{
 display:block;
 width: 850px;
 min-height: 520px;
 background-color: rgb(178, 178, 178-);
 float:right;



}

div#sub_menu{
 display:block;
 width: 147px;
 min-height: 460px;
 background-color: rgb(109, 146, 239);
 float:left;


}

div#copyline{
 width: 1023px;
 height; 20px;
 background-color: rgb(212, 120, 194);
    clear:both;
    font-size: 0.9em;
    margin: 5;
    text-align: center;
    background-color: #fed;
    border: 1px solid silver

 }

CSS 2:

/*---------------------------------------------------------*/
/* Workaround: Clearfix-Anpassung für alle IE-Versionen */
/*
** IE7 - x
*/
.clearfix { display: inline-block; }
/*
** IE5.x/Win - x
** IE6 - x
*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*--------------------------------------------------------*/

TS:

temp.mainTemplate = TEMPLATE
temp.mainTemplate {
	template = FILE
	template.file = fileadmin/templates/templatevolk_stable.html
		}
page = PAGE
page.typeNum = 0
page.10 < temp.mainTemplate
page.10.marks {
TOP_LOGO = IMAGE
TOP_LOGO.file = fileadmin/templates/images/banner1.jpg
}


page.stylesheet = fileadmin/templates/style.css
config {
//XHTML-strict
doctype = xhtml_strict
htmlTag_langKey = de-DE
xhtml_cleaning = all
xmlprologue = none
}

Das ist doch echt behämmert mit dem IE. Mit dem hat man nur noch Probleme... #angry#

Christian

Probier mal das:
Einfach ins Setup im Root-Template einfügen. Hat bei mir geklappt:

config {
doctype = xhtml_trans
xhtml_cleaning = all
xmlprologue = none
htmlTag_langKey = de
metaCharset = iso-8859-1
}