✔ IE 6 und "zerfallene" DIVs

soezkan · 22. Juni 2009

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

PHP:

<!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="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="images/bookmark.png" border="0" alt="Bookmark this site"> Bookmark<br />
	<img src="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

HTML:

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

Maik · 22. Juni 2009

Hi,

sieht ganz nach dem "Doubled-Float-Margin-Bug" aus.

Lösung:

CSS:

div#ContentBox {
        ...
}
* html div#ContentBox { /* Für IE6 */
        margin: 0 82.5px 0 81.5px;
}

mfg Maik

soezkan · 22. Juni 2009

Suuuper! Yipee!

Ich habe das mit dem *html jetzt auch für die anderen DIVs verwendet und nach einigem Anpassen, sieht jetzt alles so aus wie in den anderen Browsern.

Vielen vielen Dank für diesen sehr hilfreichen Tipp!

Viele Grüße
Soezkan

soezkan · 22. Juni 2009

Zu früh gefreut

Jetzt "zerhackt" der IE7 alles und es sieht jetzt aus wie der IE6 vorher.
Dieser Internet Explorer ist echt nervig. Was kann ich da tun? Kann
man da nochmal eine "Weiche" einbauen, ob jetzt auf IE6 oder auf
IE7 reagiert werden soll?

Hier das aktuelle CSS, welches mit allen Browsern inklusive IE6 funktioniert,
leider aber nicht mit dem IE7 (also IE8 zeigt alles wie es sein soll):

HTML:

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;
}

Hat da jemand einen Tipp?

Bitte um Rückmeldung! 1000 Dank,
Soezkan

Maik · 22. Juni 2009

Solange das HTML-Dokument den Browsern im standardkonformen Modus übergeben wird, interpretiert der IE7 den "Star-HTML-Hack" überhaupt nicht.

Ansonsten kannst du anstelle dessen auch die Conditional Comments als CSS-Browserweiche für den IE nutzen, und im Konfliktfall zwischen den einzelnen Versionen unterscheiden.

mfg Maik

soezkan · 22. Juni 2009

Das ist ein guter Tipp. Ich werde das wohl auch dann so machen.

Ist es eigentlich so, dass ich dann über diese Browserweiche mit dem import
dann lediglich die *html div#... Dinger einbinde? Also aus der ursprünglichen CSS
herausnehme und sie dann zusätzlich einbinde? Oder müssen die CSS-Befehle
namens *html div#..... direkt nach dem eigentlichen div#..... stehen?

Für einen Tipp mehr wäre ich dankbar

Viele Grüße
Soezkan

Maik · 22. Juni 2009

Wenn du dem IE mittels des "Conditional Comments" sein Stylesheet übergibst, ist darin der "Star-HTML-Hack" nicht von nöten. Ebenso wird darin nicht das übrige Stylesheet wiederholt, sondern nur die Selektoren und CSS-Regeln genannt, die einer Anpassung im IE bedürfen.

mfg Maik

soezkan · 22. Juni 2009

Vielen Dank für die hilfreichen Tipps!

✔ IE 6 und "zerfallene" DIVs

soezkan

Erfahrenes Mitglied

Maik

soezkan

Erfahrenes Mitglied

soezkan

Erfahrenes Mitglied

Maik

soezkan

Erfahrenes Mitglied

Maik

soezkan

Erfahrenes Mitglied

Neue Beiträge