IE6 verwirft das Design

[1508]

hallo zusammen

Leider habe ich noch wenig Erfahrung in HTML und CSS, nun stehe ich vor einem Problem wo ich einfach nicht mehr weiter weiss.
Meine Seite Http://booom.ch wird im IE7 richtig dargestellt, mit dem IE6 wird aber das ganze Design über den Haufen geworfen, die Layer sind plötzlich übereinader gestapelt und zentriert, die Seite ist im IE7 zentriert im IE6 plötzlich linksbündig.

Wäre super wenn mir da jemand den richtigen Tip geben könnte.

hier das CSS, Danke!


* { margin:0; padding:0; font-size: 100%; }

html { height: auto;
}

body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background: #000000;
font-size: 62.5%;
padding: 0px;
}

a {
color: #666666;
}

a:link {
color: #666666;
}

a:active {
color: #666666;
}

a:visited {
color: #666666;
}

a:hover {
color: #ff6600;
}

ul li {/*list-style: none;*/
padding: 0em 0em 0em 0em;
margin:0em 0em 0em 1.1em;}

ol li {/*list-style: none;*/
padding: 0em 0em 0em 0em;
margin:0em 0em 0em 1.7em;}

h1 {font-size:1.2em;
margin: 1.1em 0em 0.3em 0em;
padding: 0em 0em 0em 0em;
color:#FF6600;
font-weight:bold;
}

/* no border */
fieldset, img { border:0; }

/* needed for safari */

/* mm overwritten in special cases */

select, input, textarea {
font-size: 99%
}

p.bodytext {
margin:0.4em 0em 1.2em 0em;
padding:0em 0em 0em 0em;
color: #999999;
}

#pageContainer {
margin:auto;
background-color: #00FF00;
}

#pageContainerLeftow {
/* background-image: url(../media/4.jpg); */
background-position: left;
background-color: #0000FF;
background-repeat: repeat-y;
font-size: 100%;
}



#page {
width: 790px;
margin: 0 auto;
}

#main {
background-image: url(../media/2.gif);
background-repeat: no-repeat;
clear:both;
list-style-type: none;
width: auto;
z-index: 10;
overflow:hidden;
}

#colRightContainer {
float:right;
width: 85%;
z-index: 10;
padding-top: 0px;
}

#colRight {
margin-left: 0.5em;
z-index: 10;
}

#colLeftContainer {
width:auto;
z-index: 10;
height: 380px;
padding:10px;
}

#colLeft {
z-index: 10;
}

#footer {
font-size: 1.2em;
text-align: right;
clear:both;
width: 100%;
}

#logoContainer {
height: 10px;
}

#logo {
margin: 0em 0em 0em 2em;
padding: 0em 0em 0em 0em;
}

/** Main Navigation

------------------------------*/

#logo-top {
background-image: url(../media/2.gif);
background-repeat: no-repeat;
background-position: right;
height: 140px;
margin: 0 auto;
}

#nav {
width: 100%;
height: 160px;
margin: 20px -20px;
float: left;
font-size: 1.5em;
}

#nav ul {
margin: 0em;
padding: 140px;
list-style: none;
text-align: left;
}

#nav li {
float:left;
}

#nav a {
text-decoration: none;
display: block;
padding: 0em 0em;
border-style: solid;
border-color: #FF6600;
border-width: 0px 0px 0px 0px;
/* bottom */
}

#nav a.l1-no {
background-color: #ff6600;
color: #ff6600;
}

#nav a.l1-no:hover {
background-color: #ff6600;
color: #ff6600;
}

#nav a.l1-act {
background-color: #666666;
color: #C97016;
}

#mainnavi {
border-style: solid;
border-color: #FF6600;
border-width: 0px 0px 0px 0px;
font-size: 1em;
}

#mainnavi ul {
margin: 0em;
padding: 0em;
list-style: none;
display: inline;
}

#mainnavi li {
padding: 0;
margin: 0;
}

#mainnavi a {
text-decoration: none;
border-width: 0px 0px 0px 1px;
border-style: solid;
border-color: #ff6600;
display: block;
padding: 0.6em 1em;
}

#mainnavi a.l2-no{
background-color: #ff6600;
color: #ff6600;
}

#mainnavi a.l2-no:hover {
background-color: #333333;
color: #00FF00;
}

#mainnavi a.l2-act {
background-color: #00FF99 ;
}

.headerimg {
width: 100%;
}

/** Breadcrumb

------------------------------*/
#breadcrumb {
margin: 0 0 2em 0;
padding: 0px 0px 0px 12px;
font-size: 1.2em;
}

#breadcrumb a {
text-decoration: none;
color: #999999 }

#pageFunctions {
margin: 0;
padding: 0;
float: right;
text-align: right;
width: 100%;
}

#pageFunctions li {
display: inline;
list-style: none;
}

#pageFunctions li a {
text-decoration: none;
}



/** Container in Container

------------------------------*/

.subContainer {
width: 100%;
padding: 0 1px 0 1px;
margin: 0 -1px 0 -1px;
overflow:hidden;
}



.subLeftContainer {
float: left;
overflow: hidden;
padding: 10px 0px 0px 0px;
}


.subRightContainer {
padding: 20px 0px 10px 0px;
margin:0em 0em 0em 0em;
float: right;
overflow: hidden;
}

/* .breadCrumbContainer, */

.contentLeftContainer {
width: 40.00%;
height: 360px;
}

.contentRightContainer {
width: 60.00%;
height: 360px;
}

/* .layoutChangesContainer,.loginContainer { width: 49.999%; }*/

.subLeft {
padding: 0 10px 0 10px;
margin: 0 0 0 0px;
overflow: hidden;
}

.subRight {

padding: 0px 10px 0 10px;
margin: 20px 10px 0 10px;
overflow: visible;
}

/** Content
------------------------------*/

#content {
font-size: 1.2em; /* set font-size in the contentarea to 12px */
margin: 0em 1em 0em 1em;
}

.contentLeftContainer .subLeft {
padding-right: 1em;
}

.contentRightContainer .subRight {
}

#footer {
color:#333333;
margin: 0;
background: none;
padding: 0 0 0 0;
line-height: 2em;
}


/* Clearfix-Methode zum Clearen der Float-Umgebungen */

.col-clearing:after {
/* content: "."; */
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* needed for Safari */
.col-clearing { display: block; }

/* Overflow-Methode zum Clearen der Float-Umgebungen */
.floatbox { overflow:hidden; }

/* IE-Clearing: Benötigt nur der Internet Explorer und über iehacks.css zugeschaltet */
#ie_clearing { display: none }

[sejuma]

AW: IE6 verwirft das Design

Diese erste Zeile wirft ihn in den Quirksmode, so dass er das Boxmodell nicht richtig anzeigt:

<?xml version="1.0" encoding="utf-8"?>

Sieh mal hier ziemlich unten unter "Der XML-Prolog" nach.

[1508]

AW: IE6 verwirft das Design

Sejuma
Danke für die schnelle Antwort, nur leider komme ich immer noch nicht weiter, egal ob ich die Zeile weglasse oder nicht, am Layout (IE6 & IE7) ändert sich nichts. Wie komme ich da weiter?
Hier noch mein html zur ansicht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Seitentemplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Fügen Sie hier ihre Meta-Daten ein -->
<link href="css/screen.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
[if lte IE 7]
<link href="css/ie.css" rel="stylesheet" type="text/css" />
[endif]

</head>
<body>
<!-- ###DOCUMENT_BODY### begin -->
<div id="page" class="hold_floats">
<div id="main">
<div>
<!-- navigation -->
<!-- <div id="logo-top">
</div> -->
<div id="nav">
<!-- ###MAINNAVI### begin -->
<ul>
<li><a href="http://booom.ch" class="l2-no">Flugzeugpark</a></li>
<li><a href="#" class="l2-act">Flugberichte</a></li>
<li><a href="#" class="l2-no">Flugsicherheit</a></li>
</ul>
<!-- ###MAINNAVI### end -->
</div>
<!-- Right Column -->
<div id="colRightContainer">
<div id="colRight" class="col-clearing">
</div>
<!-- ###HEADERIMG### begin -->
<!-- ###HEADERIMG### end -->
<!-- Content -->
<a name="content"></a> <!-- Skiplink-Anker: Content -->
<div id="content">
<div class="subContainer">
<div class="subLeftContainer contentLeftContainer">
<div class="subLeft">
<!-- ###CONTENT### begin -->
Inhalt in der linken Spalte<br /><br />
<!-- ###CONTENT### end -->
</div>
</div>
<div class="subRightContainer contentRightContainer">
<div class="subRight">
<!-- ###CONTENT_RIGHT### begin -->
Inhalt in der rechten Spalte
<!-- ###CONTENT_RIGHT### end -->
</div>
</div>
</div>
</div>
<!-- <!-- Breadcrumb --
<div id="breadcrumb" class="subContainer">
<!-- ###BREADCRUMB### begin --
<a href="#">Fliegen</a> &gt;
<a href="#">Flugberichte</a> &gt;
<a href="#">KISI in den Pyrenäen</a>
<!-- ###BREADCRUMB### end --
</div> -->
</div>
</div>
<div id="colLeftContainer">
<div id="colLeft" class="col-clearing" >
<div id="logoContainer">
</div>
<!-- navigation -->
<div id="mainnavi">
<!-- ###LMAINNAVI### begin -->
<ul>
<li><a href="#" class="l1-no">Startseite</a></li>
<li><a href="#" class="l1-no">Aktuelles</a></li>
<li><a href="#" class="l1-act">Fliegen</a></li>
<li><a href="#" class="l1-no">Vereinsimpressionen</a></li>
<li><a href="#" class="l1-no">Kontakt</a></li>
</ul>
<!-- ###LMAINNAVI### end -->
</div>
</div>
</div>
<div class="Stil2" id="footer">
&copy; ###YEAR### Ihre Firma, Letzte Änderung ###LAST_CHANGE### </div>
</div>
</div>
<!-- ###DOCUMENT_BODY### end -->
</body>
</html>

[Ingo]

AW: IE6 verwirft das Design

Hi,
du wirst Dein Seitenkonzept ohnehin überarbeiten müssen, denn overflow:hidden ist ganz böse... Längere Seiten wie http://booom.ch/index.php?id=5 werden hierdurch (bereits in einem Standardfenster) abgeschnitten.

Und räume bei dieser Gelegenheit Dein CSS auf - ist so viel zu unübersichtlich und enthält auch einiges unnötige wie z.B. z-index.

Gruß
Ingo