IE 6 und "zerfallene" DIVs von ChrisB, 22.06.2009 18:36

IE 6 und "zerfallene" DIVs

soezkan 22.06.2009 11:09

Liebe Gemeinde,

ich weiß, dass dieses Thema immer wieder zur Frage kommt, aber ich bin einfach am Ende mit meinem Latein. Der schrottige IE6 verschiebt mir meine DIVs wahllos. Es ist wirklich ärgerlich:

Das hier ist mein HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<meta name="description" content="insurance">  
<title>Meine Seite</title>  
<link href="css/meineseite.css" rel="stylesheet" type="text/css">  
<style type="text/css">  
</style>  
</head>  
<body>  
  
<div id="centerboxmain">  
	<div id="LeftColumn">  
	<p><img src="http://www.tutorials.de/forum/images/logo.png" border="0" alt="Meine Seite Logo"></p>  
	<p><img src="bilder/clock.png" border="0" alt="Clock Cypheron"></p>  
	</div>  
	<div id="RightColumn">  
	<p><img src="http://www.tutorials.de/forum/images/bookmark.png" border="0" alt="Bookmark this site"> Bookmark<br />  
	<img src="http://www.tutorials.de/forum/images/feed.png" border="0" alt="RSS Feed"> RSS Feed</p>  
	</div>  
	<div id="CenterColumn">  
        <div id="HeaderBox">  
		Die heutigen Wissenschaftler haben Mathematik durch Experimente ersetzt, und sie verlieren sich von einer Gleichung in der anderen, bis sie schließlich eine Struktur konstruieren werden, die gar keine Beziehung mehr zur Realität hat.  
		<br />  
		<p class="celebrity">Nikola Tesla</p>  
        </div>  
        <div id="NavigationBox">  
            <div id="MainNavigation">  
 				<h6>Algorithmen</h6>  
				<h6>Korrespondenzen</h6>  
				<h6>Art Gallery</h6>  
				<h6>Videos</h6>  
				<h6>News</h6>  
				<h6>Kontakt</h6>  
			</div>  
			<div id="SubNavigation">  
 				<h6>Forum</h6>  
				<h6>Newsletter</h6>  
				<h6>Glossar</h6>  
				<h6>Disclaimer</h6>  
				<h6>Quellen</h6>  
				<h6>Links</h6>				  
			</div>  
        </div>  
        <div id="ContentBox">  
		<p><h3>Die Zwei&nbsp;&nbsp; &bull; &nbsp;&nbsp;2<p style="font-weight: normal; font-variant: normal; font-size: 14px; font-style: normal">Two - Deux - Dos - Iki - Dva - Δύο</p></h3>  
		</p>  
		<p><br /><br />  
		<p class="ContentColumnLeft">Dualit&auml;t, Zwielicht, Zwietracht, Konflikt, Zweifel, Andersartigkeit, der statische Zustand, das Verwurzelte, Gleichgewicht, Stabilit&auml;t, Reflexion, die entgegengesetzten Pole, die Doppelnatur des Menschen. Begierde, denn alles, was in Dualit&auml;t manifestiert ist, existiert in Gegensatzpaaren. Wie die Eins einen Punkt darstellt, steht die zwei f&uuml;r eine Strecke.</p>  
		<p class="ContentColumnRight">Die Zwei ist das Weinen und das Lachen. Sie repr&auml;sentiert das urweibliche Prinzip der Empf&auml;ngnis, der gro&szlig;en Mutter. Das Gefühl bestimmt die Handlungen. Die Gegens&auml;tze, Sonne und Mond, K&ouml;nig und K&ouml;nigin, Schwefel und Quecksilber, anf&auml;nglich antagonistisch, aber am Ende aufgel&ouml;st und vereint im Androgyn.</p>  
		</p>  
		</div>  
	</div>  
</div>  
</body>  
</html>

Und so sieht der Style aus

body {  
	background: url(../images/background_rect.png) repeat-y 50% 0;  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	font-family: Georgia;  
	background-color: #460202;  
	text-align: center;  
}  
  
#centerboxmain {  
	width: 1024px;  
	padding: 0px 0px 0px 0px;  
	margin-top: 0px;  
	margin-bottom: 0px;  
	margin-right: auto;  
	margin-left: auto; 	  
	/* opera does not like 'margin:20px auto' */  
	text-align:left;  
	/* part 2 of 2 centering hack */  
	width: 1024px; /* ie5win fudge begins */  
	voice-family: "\"}\"";  
	voice-family:inherit;  
	width: 994px;  
	min-height: 100%;  
	height: 100%;  
/*border: 1px dotted green;*/  
}  
  
html>body #centerboxmain {  
	width: 994px; /* ie5win fudge ends */  
	min-height: 100%;  
	height: 100%;  
}  
  
  
  
/********************/  
/** LEFT COLUMN *****/  
/********************/  
  
div#LeftColumn {  
	font-family: Georgia;  
	font-size: 15px;  
	float: left;  
	width: 140px;  
	margin: 10px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	min-height: 100%;  
	height: 100%;  
	text-align: center;  
/*border: 1px dotted green;*/  
}  
div#LeftColumn p {  
	font-family: Arial;  
	font-size: 12px;  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 20px 0px;  
}  
div#LeftColumn ul {  
	margin: 0px 0 15px 15px;  
	padding: 0 0 0 0;  
}  
div#LeftColumn li {  
	font-family: Georgia;  
	font-size: 15px;  
	list-style: none;  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
}  
  
div#LeftColumn a {  
	font-family: Georgia;  
	font-size: 15px;  
	display: block;  
	text-decoration: none;  
}  
div#LeftColumn a:link {  
	color: #666666  
}  
div#LeftColumn a:visited {  
	color: #666666;  
}  
div#LeftColumn a:hover {  
	color: #000000;  
}  
div#LeftColumn a:active {  
	color: #666666  
}  
div#LeftColumn a.subnavi {  
	font-family: Georgia;  
	font-size: 12px;  
	list-style: none;  
	margin: 0px 0px 0px -5px;  
	padding: 3px 0px 3px 0px;  
}  
  
  
  
/********************/  
/** RIGHT COLUMN ****/  
/********************/  
  
div#RightColumn {  
	font-family: Arial;  
	float: right;  
	width: 125px;  
	color: #ffffff;  
	margin: 17px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	font-size: 15px;  
	text-align: left;  
/*border: 1px dotted green;*/  
}  
  
div#RightColumn h2 {  
	font-size: 14px;  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
}  
  
div#RightColumn h3 {  
	font-size: 14px;  
	font-weight: normal;  
	margin: 0px 0px 0px 0px ;  
	padding: 0px 0px 7px 0px ;  
}  
  
div#RightColumn p {  
	font-size: 14px;  
	color: #EAE4D6;  
	margin: 7px 0px 15px 0px ;  
	padding: 7px 0px 0px 0px ;  
}  
  
div#RightColumn a {  
	font-family: Georgia;  
	font-size: 15px;  
	display: block;  
	text-decoration: underline;  
}  
div#RightColumn a:link {  
	color: #666666  
}  
div#RightColumn a:visited {  
	color: #666666;  
}  
div#RightColumn a:hover {  
	color: #000000;  
}  
div#RightColumn a:active {  
	color: #666666  
}  
  
  
  
/********************/  
/** CENTER COLUMN ***/  
/********************/  
  
div#CenterColumn {  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	text-align: center;  
/*border: 1px dotted green;*/  
}  
  
* html div#CenterColumn {  
	height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */  
}  
  
/* HEADER BOX */  
  
div#HeaderBox {  
	margin: 0px 0px 0px 208px;  
	padding: 20px 0px 0px 0px;  
	font-family: Georgia;  
	font-size: 12px;  
	font-style: italic;  
	text-align: left;  
	color: #715E37;  
	min-height: 78px;  
	height: 78px;  
	width: 580px;  
}  
  
div#HeaderBox .celebrity {  
	margin: 0px 0px 0px 0px;  
	font-variant: small-caps;  
	text-align: right;  
}  
  
/* NAVIGATION BOX */  
  
div#NavigationBox {  
	margin: 0px 0px 0px 166px;  
	padding: 0px 0px 0px 0px;  
	text-align: center;  
}  
  
div#MainNavigation {  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	background-color: #1C3369;  
  
	width: 660px;  
	min-height: 32px;  
	height: 32px;  
	text-align: center;  
/*border: 1px dotted green;*/  
}  
  
div#MainNavigation h6 {  
	margin: 6px 0px 0px 10px;  
	padding: 0 0px 0 22px;  
	font-family: Georgia;  
	font-size: 14px;  
	font-variant: small-caps;  
	font-weight: normal;  
	font-style: normal;  
	color: #ffffff;  
	float: left;  
	text-align: center;  
}  
  
div#SubNavigation {  
	margin: 0px 0px 0px 0px;  
	padding: 0 0 0 0;  
	color: #1C3369;  
	background-color: #D0BCA6;  
	width: 660px;  
	min-height: 30px;  
	height: 30px;  
}  
div#SubNavigation h6 {  
	margin: 6px 8px 0px 10px;  
	padding: 0 14px 0 24px;  
	font-family: Georgia;  
	font-size: 12px;  
	font-variant: small-caps;  
	font-weight: normal;  
	font-style: normal;  
	color: #1C3369;  
	float: left;  
	text-align: center;  
}  
  
/* CONTENT BOX */  
  
div#ContentBox {  
	margin: 0 165px 0 163px;  
	padding: 30px 20px 30px 20px;  
	font-family: Georgia;  
	font-size: 14px;  
	color: #1C3369;  
	min-height: 100%;  
	height: 100%;  
	text-align: left;  
	vertical-align: top;  
}  
  
div#ContentBox p {  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;	  
}  
  
div#ContentBox h3 {  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	font-size: 16px;  
	color: #1C3369;  
	text-align: center;  
}  
  
div#ContentBox a {  
	font-family: Georgia, Times New Roman;  
	text-decoration: underline;  
	color: #1D3367;  
}  
div#ContentBox a:hover {  
	text-decoration: none;  
	color: #1D3367;  
}  
div#ContentBox a:active {  
	text-decoration: none;  
	color: #1D3367;  
}  
  
div#ContentBox .ContentColumn {  
	margin-top: 20px;  
	padding: 10px;  
	width: 180px;  
	text-align: justify;  
	vertical-align: top;  
	float: left;  
}  
  
div#ContentBox .ContentColumnLeft {  
	width: 310px;  
	text-align: justify;  
	float: right;  
}  
div#ContentBox .ContentColumnRight {  
	width: 310px;  
	text-align: justify;  
	float: left;  
}

Alle Browser zeigen alles was sich im DIV mit der ID = CenterColumn befindet richtig an (auch IE7 und IE8) aber der IE6 verschiebt alles um ca 200-300 Pixel nach rechts und macht seltsame Umbrüche: mit anderen Worten der IE6 "quetscht" alles nach rechts => sieht horrormässg furchtbar aus.

Ich habe auch schon versucht die IDs die in der CenterColumn stehen alle samt als Klassen zu definieren. Ist aber das Gleiche geblieben.

Was soll ich bloss tun, bin ratlos?

1000 Dank für jeden Tipp!
Viele Grüße,
Soezkan

Beitrag melden

– Informationen zu den Bewertungsregeln

Gelöst: IE 6 und "zerfallene" DIVs

soezkan 22.06.2009 13:03

– Informationen zu den Bewertungsregeln

Das ist die Lösung für IE6 Bug: Doubled-Float-Margin-Bug

body {  
	background: url(../images/background_rect.png) repeat-y 50% 0;  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	font-family: Georgia;  
	background-color: #460202;  
	text-align: center;  
}  
  
#centerboxmain {  
	width: 1024px;  
	padding: 0px 0px 0px 0px;  
	margin-top: 0px;  
	margin-bottom: 0px;  
	margin-right: auto;  
	margin-left: auto; 	  
	/* opera does not like 'margin:20px auto' */  
	text-align:left;  
	/* part 2 of 2 centering hack */  
	width: 1024px; /* ie5win fudge begins */  
	voice-family: "\"}\"";  
	voice-family:inherit;  
	width: 994px;  
	min-height: 100%;  
	height: 100%;  
/*border: 1px dotted green;*/  
}  
  
html>body #centerboxmain {  
	width: 994px; /* ie5win fudge ends */  
	min-height: 100%;  
	height: 100%;  
}  
  
  
  
/********************/  
/** LEFT COLUMN *****/  
/********************/  
  
div#LeftColumn {  
	font-family: Georgia;  
	font-size: 15px;  
	float: left;  
	width: 140px;  
	margin: 10px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	min-height: 100%;  
	height: 100%;  
	text-align: center;  
/*border: 1px dotted green;*/  
}  
div#LeftColumn p {  
	font-family: Arial;  
	font-size: 12px;  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 20px 0px;  
}  
div#LeftColumn ul {  
	margin: 0px 0 15px 15px;  
	padding: 0 0 0 0;  
}  
div#LeftColumn li {  
	font-family: Georgia;  
	font-size: 15px;  
	list-style: none;  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
}  
  
div#LeftColumn a {  
	font-family: Georgia;  
	font-size: 15px;  
	display: block;  
	text-decoration: none;  
}  
div#LeftColumn a:link {  
	color: #666666  
}  
div#LeftColumn a:visited {  
	color: #666666;  
}  
div#LeftColumn a:hover {  
	color: #000000;  
}  
div#LeftColumn a:active {  
	color: #666666  
}  
div#LeftColumn a.subnavi {  
	font-family: Georgia;  
	font-size: 12px;  
	list-style: none;  
	margin: 0px 0px 0px -5px;  
	padding: 3px 0px 3px 0px;  
}  
  
  
  
/********************/  
/** RIGHT COLUMN ****/  
/********************/  
  
div#RightColumn {  
	font-family: Arial;  
	float: right;  
	width: 128px;  
	color: #ffffff;  
	margin: 17px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	font-size: 15px;  
	text-align: left;  
/*border: 1px dotted green;*/  
}  
  
div#RightColumn h2 {  
	font-size: 14px;  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
}  
  
div#RightColumn h3 {  
	font-size: 14px;  
	font-weight: normal;  
	margin: 0px 0px 0px 0px ;  
	padding: 0px 0px 7px 0px ;  
}  
  
div#RightColumn p {  
	font-size: 14px;  
	color: #EAE4D6;  
	margin: 7px 0px 15px 0px ;  
	padding: 7px 0px 0px 0px ;  
}  
  
div#RightColumn a {  
	font-family: Arial;  
	font-size: 13px;  
	font-weight: bold;  
	text-decoration: none;  
	color: #FB8360;  
}  
div#RightColumn a:link {  
	color: #FB8360  
}  
div#RightColumn a:visited {  
	color: #FB8360;  
}  
div#RightColumn a:hover {  
	color: #FB8360;  
	text-decoration: underline;  
}  
div#RightColumn a:active {  
	color: #FB8360  
}  
  
  
  
/********************/  
/** CENTER COLUMN ***/  
/********************/  
  
div#CenterColumn {  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	text-align: center;  
/*border: 1px dotted green;*/  
}  
* html div#CenterColumn {  
	margin: 20px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */  
}  
  
/* HEADER BOX */  
  
div#HeaderBox {  
	margin: 0px 0px 0px 208px;  
	padding: 20px 0px 0px 0px;  
	font-family: Georgia;  
	font-size: 12px;  
	font-style: italic;  
	text-align: left;  
	color: #715E37;  
	min-height: 78px;  
	height: 78px;  
	width: 580px;  
}  
* html div#HeaderBox {/*Bug fix IE6 */  
	margin: 0px 0px 0px -10px;  
	padding: 0px 0px 0px 0px;  
}  
  
div#HeaderBox .celebrity {  
	margin: 0px 0px 0px 0px;  
	font-variant: small-caps;  
	text-align: right;  
}  
  
/* NAVIGATION BOX */  
  
div#NavigationBox {  
	margin: 0px 0px 0px 166px;  
	padding: 0px 0px 0px 0px;  
	text-align: center;  
}  
* html div#NavigationBox {/*Bug fix IE6 */  
	margin: 0px 0px 0px -14px;  
	padding: 0px 0px 0px 0px;  
}  
  
div#MainNavigation {  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	background-color: #1C3369;  
  
	width: 660px;  
	min-height: 32px;  
	height: 32px;  
	text-align: center;  
/*border: 1px dotted green;*/  
}  
  
div#MainNavigation h6 {  
	margin: 6px 0px 0px 10px;  
	padding: 0 0px 0 19px;  
	font-family: Georgia;  
	font-size: 14px;  
	font-variant: small-caps;  
	font-weight: normal;  
	font-style: normal;  
	color: #ffffff;  
	float: left;  
	text-align: center;  
}  
  
div#MainNavigation a {  
	font-family: Georgia;  
	font-size: 14px;  
	font-weight: normal;  
	text-decoration: none;  
	color: #ffffff;  
}  
div#MainNavigation a:link {  
	color: #ffffff  
}  
div#MainNavigation a:visited {  
	color: #ffffff;  
}  
div#MainNavigation a:hover {  
	color: #ffffff;  
	text-decoration: underline;  
}  
div#MainNavigation a:active {  
	color: #ffffff  
}  
  
div#SubNavigation {  
	margin: 0px 0px 0px 0px;  
	padding: 0 0 0 0;  
	color: #1C3369;  
	background-color: #D0BCA6;  
	width: 660px;  
	min-height: 30px;  
	height: 30px;  
}  
div#SubNavigation h6 {  
	margin: 6px 8px 0px 10px;  
	padding: 0 8px 0 20px;  
	font-family: Georgia;  
	font-size: 13px;  
	font-variant: small-caps;  
	font-weight: normal;  
	font-style: normal;  
	color: #1C3369;  
	float: left;  
	text-align: center;  
}  
  
div#SubNavigation a {  
	font-family: Georgia;  
	font-size: 13px;  
	font-weight: normal;  
	text-decoration: none;  
	color: #1C3369;  
}  
div#SubNavigation a:link {  
	color: #1C3369  
}  
div#SubNavigation a:visited {  
	color: #1C3369;  
}  
div#SubNavigation a:hover {  
	color: #1C3369;  
	text-decoration: underline;  
}  
div#SubNavigation a:active {  
	color: #1C3369  
}  
  
/* CONTENT BOX */  
  
div#ContentBox {  
	margin: 0 0px 0 165px;  
	padding: 30px 20px 30px 20px;  
	font-family: Georgia;  
	font-size: 14px;  
	color: #1C3369;  
	width: 620px;  
	min-height: 100%;  
	height: 100%;  
	text-align: left;  
	vertical-align: top;  
}  
* html div#ContentBox {/*Bug fix IE6 */  
	margin: 0px 0px 0px -14px;  
}  
  
div#ContentBox p {  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;	  
}  
  
div#ContentBox h3 {  
	margin: 0px 0px 0px 0px;  
	padding: 0px 0px 0px 0px;  
	font-size: 16px;  
	color: #1C3369;  
	text-align: center;  
}  
  
div#ContentBox a {  
	font-family: Georgia, Times New Roman;  
	text-decoration: underline;  
	color: #1D3367;  
}  
div#ContentBox a:hover {  
	text-decoration: none;  
	color: #1D3367;  
}  
div#ContentBox a:active {  
	text-decoration: none;  
	color: #1D3367;  
}  
  
div#ContentBox .ContentColumn {  
	margin-top: 20px;  
	padding: 10px;  
	width: 180px;  
	text-align: justify;  
	vertical-align: top;  
	float: left;  
}  
  
div#ContentBox .ContentColumnLeft {  
	width: 297px;  
	text-align: justify;  
	float: left;  
}  
  
div#ContentBox .ContentColumnRight {  
	margin: 0 -1px 0 0;  
	width: 297px;  
	text-align: justify;  
	float: right;  
}

Beitrag melden

– Informationen zu den Bewertungsregeln

IE 6 und "zerfallene" DIVs
ChrisB 22.06.2009 18:36

css
– Informationen zu den Bewertungsregeln
Hi,

<div id="NavigationBox">
            <div id="MainNavigation">
<h6>Algorithmen</h6>
<h6>Korrespondenzen</h6>

Wo sind die Überschriften der Ordnungen 1 bis 5?

<div id="centerboxmain">
        <div id="LeftColumn">...
        <div id="RightColumn">

Du solltest sinnvollere IDs vergeben - die die Funktion von Elementen kennzeichnen, und sich nicht auf die *derzeit* gewünschte Darstellung beziehen.

MfG ChrisB

--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

soezkan: IE 6 und "zerfallene" DIVs