Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 05.09.2008, 16:32
koknarr koknarr ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2008
Beiträge: 10
koknarr befindet sich auf einem aufstrebenden Ast
Standard Design Float IE6 Problem

Hallo

Ich hab ein kleines Problem bei meinem Design mit dem IE6, in FF3 und IE7 tritt das Problem nicht auf (welch ein Wunder).

Im Maincontent hab ich ein 3 Spalten Layout verschachtelt, nur für die Background pictures, im IE6 verschiebt sich der Container ganz links, und ich hab keine Ahnung warum.

Am besten seht selbst auf : Soul-Side Männedorf mit dem IE6 und mit z.B. Firefox.

Hier der HTML Code:
Code:
<?xml version="1.0" ?>
<!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"
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="kokson">

	<title>Soul-Side Männedorf</title>
	
	<!--[if lte IE 6]>

		<style type="text/css">

			#content { height: 500px;}
			#content_middle {height: 500px;}

		</style>

	<![endif]-->

    <link rel="stylesheet" type="text/css" href="style.css">
</head>


<body>
    <div id="maincontainer">
       	<div id="header"></div>
       	<div id="navi"></div>
       	<div id="content">
			<div id="content_left">
			    <div id="content_left_inner"></div>
	    		<div id="content_right">
	      			<div id="content_middle">
						<div id="maincontent-left"></div>
					   	<div id="maincontent-right">
					   	    <!--<div id="ruler"></div>
							<div class="box">
							    <div><div><div><div><div><div><div>
						       	<div class="inhalt">
							    </div>
							    </div></div></div></div></div></div></div>
							</div>  -->
						   
					    </div>
					   	<div class="nofloat"></div>
					</div>
	      			<div id="content_right_inner"></div>
				</div>
				<div class="nofloat"></div>
			</div>
		</div> 
	   	<div id="footer"></div>
	</div>
 
</body>
</html>
Und hier das CSS File:

Code:
/* Hauptdesign */

body {
	font-family: Helvetica, sans-serif, Arial;
	text-align:center;
	padding:0;
	margin:0;
	background-image: url(pictures/background.png);
	background-repeat: repeat-x;
}

#maincontainer {
	text-align:left;
    margin:0 auto 0 auto;
    width: 859px;

}

#header {
	width: 859px;
	height: 218px;
	background-image: url(pictures/Header.png);
}

#navi {
	width: 859px;
	height: 19px;
	background-image:  url(pictures/navi.png);
}

#content {
    width: 859px;
    min-height: 500px;
	background-image: url(pictures/back_content.png);
	background-repeat: repeat-y;	
}

#content_left {	
	background-image: url(pictures/verlauf_left.png);
	background-repeat: no-repeat;		
}

#content_left_inner {
	width: 33px;
	float:left;
}

#content_middle {
	/*padding: 10px 10px 10px 10px;*/
	min-height: 500px;
}

#content_right {
	width: 826px;
	float: right;
	background-image: url(pictures/verlauf_right.png);
	background-position: right top;
	background-repeat: no-repeat;
}

#content_right_inner {
	width: 26px;
	float:right;
}

#maincontent-left {
	width: 200px;
	float: left;
}

#maincontent-right {
	width: 600px;
	margin-left: 200px;
}


#footer {
	width: 859px;
	height: 27px;
	background-image: url(pictures/footer.png);			
}

#ruler {
	width: 570px;
	height: 3px;
	background-image:  url(pictures/header_line.png);
}

/* Content Box */
div.box {background:url(pictures/box_left.png) repeat-y; background-color: white; width: 570px;}
div.box div {background:url(pictures/box_right.png) right repeat-y;}
div.box div div {background:url(pictures/box_top.png) repeat-x;}
div.box div div div {background:url(pictures/box_bottom.png) bottom repeat-x;}
div.box div div div div {background:url(pictures/box_top_left.png) left top no-repeat;}
div.box div div div div div {background:url(pictures/box_top_right.png) right top no-repeat;}
div.box div div div div div div {background:url(pictures/box_bottom_left.png) left bottom no-repeat;}
div.box div div div div div div div {background:url(pictures/box_bottom_right.png) right bottom no-repeat;}

div.inhalt {
	padding: 10px 10px 10px 10px;
	min-height:100px;
} 

/* Hilfs zeugs */
.nofloat {
	overflow: hidden;
	clear: both;

	height: 1px;
	margin: -1px 0 0 0;
	font-size: 1px;
}
Kennt jemand das Problem und die Lösung?
Mit Zitat antworten
Sponsored Links