✔ Grosses Layout Problem mit IE 6

Status
Nicht offen für weitere Antworten.
crashx

crashx

Erfahrenes Mitglied
Hallo mal wieder :)

Ich habe mir eine Seite gemacht, habe sie immer und immer wieder mit, FF, Netscape, Flock, Seamonky, Opera, Mozilla und IE 7.0 getestet..... Ein Fehler, mit dem IE 6.0 hat es nicht nur kleine Fehler sondern das ganze Layout ist verschoben.

Hier mal meine CSS:

Code: 
html, body	{
			margin: 0 auto;
			border: 0 0 0 0;
			padding: 0 0 0 0;
			text-align: center;
			background-color: #FFFFFF;
			background-image: url(../images/back-setter.jpg);
			background-repeat: repeat-x;
			min-height: 101%;
			}

a.img1		{
			display:block;
            background-image:url(../images/top-1-out.jpg);
            width:106px; height:78px 
            }
.img1:hover {background-image:url(../images/top-1-over.jpg); }
a.img2		{
			display:block;
            background-image:url(../images/top-2-out.jpg);
            width:106px; height:78px 
            }
.img2:hover {background-image:url(../images/top-2-over.jpg); }
a.img3		{
			display:block;
            background-image:url(../images/top-3-out.jpg);
            width:106px; height:78px 
            }
.img3:hover {background-image:url(../images/top-3-over.jpg); }

.set:link {color:#000000; text-decoration:underline}
.set:visited {color:#000000; text-decoration:underline}
.set:active {color:#000000; text-decoration:underline;}
.set:hover {color:#CC3300; text-decoration:underline;}

.set1		{font-weight: normal; line-height: 1.2; padding-left: 12px;}
.set1:link {color:#000000; text-decoration:underline;}
.set1:visited {color:#000000; text-decoration:underline;}
.set1:active {color:#000000; text-decoration:underline;}
.set1:hover {color:#CC3300; text-decoration:underline;}

.set2:link {color:#000000; text-decoration:none;}
.set2:visited {color:#000000; text-decoration:none;}
.set2:active {color:#000000; text-decoration:none;}
.set2:hover {color:#CC3300; text-decoration:none;}

.setup		{
			margin: 0 auto;
			border: 0 0 0 0;
			padding: 0 0 0 0;
			width: 760px;
			height: 700px;
			font-family: arial;
			font-size: 11px;
			}

.top		{
			margin: 0 0 0 0;
			border: 0 0 0 0;
			padding: 0 0 0 0;
			width: 760px;
			height: 165px;
			}
			
.top-r, .top-1, .top-2, .top-3, .top-4, .top-b	{margin: 0 0 0 0; border: 0 0 0 0; padding: 0 0 0 0; float: left;}
.top-r, .top-1, .top-2, .top-3, .top-4 {height: 71px;}	
		
.top-r		{background-image: url(../images/top-left-1.jpg); width: 495px;}
.top-1		{background-image: url(../images/top-1-out.jpg); width: 75px;}
.top-2		{background-image: url(../images/top-2-out.jpg); width: 81px;}
.top-3		{background-image: url(../images/top-3-out.jpg); width: 88px;}
.top-4		{background-image: url(../images/top-end.jpg); width: 20px;}
.top-b		{background-image: url(../images/top-bottom.jpg); width: 760px; height: 94px;}

.main		{
			margin: 6px 0 0 0;
			border: 0 0 0 0;
			padding: 0 0 0 0;
			width: 760px;
			height: 500px;
			background-image: url(../images/inter.jpg);
			background-repeat: no-repeat;
			text-align: left;
			}
			
.navigation-holder		
			{
			margin: 18px 0 0 0;
			border: 0 0 0 0;
			padding: 0 0 0 0;
			width: 182px;
			height: 432px;
			float: left;
			}
			
.box		{
			margin: 0 0 6px 24px;
			border: 1px solid #000000;
			padding-left: 5px; 
			background-color: #FFCC66; 
			width: 130px;
			font-weight: bold;
			line-height: 1.3;
			float: left;
			}
			
.box1		{
			margin: 0 0 10px 0;
			border: 1px solid #000000;
			padding: 0 0 0 2px; 
			background-color: #FFCC66; 
			width: 510px;
			font-weight: bold;
			font-size: 12px;
			line-height: 1.3;
			}
			
.navigation	{
			margin: 0 0 0 48px;
			border: 0 0 0 0;
			padding: 0 0 0 0;
			width: 158px;
			height: 322px;
			float: left;
			font-weight: bold;
			line-height: 1.5;
			}
			
.stat		{
			margin: 0 0 0 32px;
			border: 0 0 0 0;
			padding: 0 0 0 0;
			width: 158px;
			height: 110px;
			float: left;
			}
			
.content	{
			margin: 18px 0 0 0;
			border: 0 0 0 0;
			padding: 0 0 0 0;
			width: 533px;
			height: 432px;
			float: left;
			overflow: auto;
			}

			.p1		{width: 260px; float: left; margin: 4px;}
			.p2		{width: 240px; float: left; margin: 4px;}

.fahrer		{
			margin: 0 0 0 0;
			border: 0 0 0 0;
			padding: 0 0 0 10px;
			width: 500px;
			}
			
			.f1, .f1a	{width: 125px; float: left; margin: 0 4px 4px 0; padding-left: 6px;}
			.f2, .f2a	{width: 125px; float: left; margin: 0 4px 4px 0; padding-left: 4px;}
			.f3, .f3a	{width:	125px; float: left; margin: 0 4px 4px 0; padding-left: 4px;}
			.f4, .f4a	{width: 90px; float: left; margin: 0 4px 4px 0; padding-left: 4px;}
			
			.f1a, .f2a, .f3a, .f4a
						{
						
						border: 1px dashed #000000; 
						background-color: #FFCC66;
						padding-left: 2px;
						font-weight: bold;
						}
			.f1b
						{
						width: 494px; 
						float: left; 
						margin: 0 4px 4px 0; 
						padding-left: 6px;
						}

.insrt		{
			margin: 0 0 0 0;
			border: 1px solid #FFCC66;
			padding-left: 1px;
			width: 90px;
			filter:alpha(opacity=75); 
			-moz-opacity: 0.75;	
			font-size: 10px;		
			}
.insrt1		{
			margin: 0 0 0 0;
			border: 1px solid #FFCC66;
			padding-left: 1px;
			filter:alpha(opacity=75); 
			-moz-opacity: 0.75;	
			font-size: 10px;		
			}
.insrtsub	{
			margin: 4px 0 0 0;
			border: 1px solid #000000;
			padding 1px;	
			font-size: 11px;
			background-color: #FFCC66
			}
			
.gbleft		{
			margin: 0 0 0 0;
			border: 0 0 0 0;
			padding: 0 10px 0 10px;
			float: left;
			width: 240px;
			}
			
.gbright	{
			margin: 0 0 0 0;
			border: 0 0 0 0;
			border-left: 1px solid #FFCC66;
			padding: 0 0 0 16px;
			float: left;
			width: 236px;
			height: 390px;
			overflow: auto;
			}
.gbtext		{
			padding-top: 10px;
			border-bottom: 1px dashed #000000;
			}
td			{vertical-align: top;}

und noch der dazugehörige HTML teil.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<? 
include('com/connect.php');
include('function.php'); 
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"></meta>
	<title>Renault 5 GT Turbo</title>
	<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen"></link>
	
	<script language="JavaScript" type="text/javascript">
	<!--
	function fensterauf(seite,fenstername,eigenschaft){
	window.open(seite,fenstername,eigenschaft);
	}
	//-->
	</script>
	
</head>
<body>
	<div class="setup">
		<div class="top">
			<div class="top-r"></div>
			<div class="top-1"><a href="index.php?additive=neutrally&amp;section=startseite" class="img1"></a></div>
			<div class="top-2"><a href="index.php?additive=neutrally&amp;section=kontakt" class="img2"></a></div>
			<div class="top-3"><a href="index.php?additive=neutrally&amp;section=favoriten" class="img3"></a></div>
			<div class="top-4"></div>
			<div class="top-b"></div>
		</div>
		<div class="main">
			<div class="navigation-holder">
				<div class="box">Navigation</div>
				<div class="navigation">
					<a href="index.php?additive=neutrally&amp;section=startseite" class="set">Home</a><br />
					<a href="index.php?additive=neutrally&amp;section=geschichte" class="set">Hintergrund</a><br />
					<a href="index.php?additive=extended&amp;section=r5gtt" class="set">Das Projekt</a><br />
					<?PHP
						if($_GET['additive'] == 'extended')
							{
								echo '<br /><a href="phase.php?additive=extended&amp;section=ausgangslage" class="set1">Ausgangslage</a>';
								echo '<br /><a href="phase.php?additive=extended&amp;section=phase1" class="set1">Phase I</a>';
								echo '<br /><a href="phase.php?additive=extended&amp;section=phase2" class="set1">Phase II</a>';
								echo '<br /><a href="phase.php?additive=extended&amp;section=phase3" class="set1">Phase III</a>';
								echo '<br /><a href="phase.php?additive=extended&amp;section=phase4" class="set1">Phase IV</a>';
								echo '<br /><a href="phase.php?additive=extended&amp;section=phase5" class="set1">Phase V</a><br /><br />';
							}
					?>
					<a href="index.php?additive=neutrally&amp;section=unterstuezung" class="set">Unterstuezung</a><br />
					<br />
					<a href="r5gttfahrer.php?additive=secure&amp;secure=<?PHP echo date('dYsHmhysD'); ?>&amp;section=r5gttfahrer&amp;sort=name&amp;method=ASC" class="set">Renault 5 Fahrer</a><br />
					<?PHP
						if($_GET['secure'])
							{
								if(!empty($_GET['secure']))
									{
										echo '<br /><a href="r5gttfahrersuche.php?additive=secure&amp;secure='.date('dYsHmhysD').'&amp;section=r5gttfahrer" class="set1">Suchen</a>';
										echo '<br /><a href="r5gttfahrerinsert.php?additive=secure&amp;secure='.date('dYsHmhysD').'&amp;section=r5gttfahrer" class="set1">Eintragen</a><br /><br />';
									}
							}
					?>
					<a href="index.php?additive=neutrally&amp;section=galerie" class="set">Galerie</a><br />
					<?PHP
						if($_GET['section'] == 'galerie')
							{
								echo '<br /><a href="index.php?additive=neutrally&amp;section=galerie" class="set1">Mein 5er</a>';
								echo '<br /><a href="index.php?additive=neutrally&amp;section=galerie" class="set1">Diverse 5er</a>';
								echo '<br /><a href="index.php?additive=neutrally&amp;section=galerie" class="set1">Galerie anlegen</a><br /><br />';
							}
					?>
					<a href="index.php?additive=neutrally&amp;section=links" class="set">Links</a><br />
					<a href="index.php?additive=neutrally&amp;section=tipps" class="set">Tipp's</a><br />
					<?PHP
						if($_GET['section'] == 'tipps')
							{
								echo '<br /><a href="index.php?additive=neutrally&amp;section=tipps" class="set1">Tipp suchen</a>';
								echo '<br /><a href="index.php?additive=neutrally&amp;section=tipps" class="set1">Tipp abgeben</a><br /><br />';
							}
					?>
					<a href="guestbook.php?additive=neutrally&amp;section=guestbook&amp;page=1" class="set">Gästebuch</a><br />
					<a href="index.php?additive=neutrally&amp;section=impressum" class="set">Impressum</a><br />
				</div>		
				<div class="box">Statistik</div>
				<div class="stat">
					Besucherzahlen
					<p>
					Heute: <? echo $tbr[3]; ?><br />
					Gesamt: <? echo $tbr[1]; ?>
					</p>
				</div>
			</div>
		<div class="content">
			<?PHP
				if(empty($_GET['section']))
					{
						$sql = "SELECT *
								FROM `content`       
								WHERE `section` = 'startseite'
								LIMIT 1
							   ";
						$result = mysql_query($sql);
						
						while ($row = mysql_fetch_assoc($result)) 
							{
								echo '<div style="text-transform:capitalize" class="box1">'.nl2br($row['section']).'</div>';
								echo '<div style="padding-left:10px">'.nl2br($row['text']).'</div>';
							}
					}
				else
					{
						$sql = "SELECT *
								FROM `content`       
								WHERE `section` = '".mysql_real_escape_string($_GET['section'])."'
								LIMIT 1
							   ";
						$result = mysql_query($sql);
								
						while ($row = mysql_fetch_assoc($result)) 
							{
								echo '<div style="text-transform:capitalize" class="box1">'.nl2br($row['section']).'</div>';
								echo '<div style="padding-left:10px">'.nl2br($row['text']).'</div>';
							}
					}
			?>
		</div>		
	</div>
</body>

</html>

Hier noch der Link zur Online Seite: Klick mich

Ich verstehe nicht viel von CSS, aber ich sitze schon 4 stunden vor dem Problem und kann es einfach nicht Lösen.

Vielleicht hat mir jemand von euch einen Ansatz
 
Der IE 6 verdoppelt bei floatenden Boxen die horizontalen margin-Werte, was zu den Verschiebungen führt.

Mit Hilfe der !important-Regel lassen sie sich für den IE korrigieren, sprich halbieren:

Code: 
.box                {
                        margin: 0 0 6px 24px !important; /* Moderne Browser */
                        margin: 0 0 6px 12px; /* IE */
                        border: 1px solid #000000;
                        padding-left: 5px;
                        background-color: #FFCC66;
                        width: 130px;
                        font-weight: bold;
                        line-height: 1.3;
                        float: left;
                        }

.navigation        {
                        margin: 0 0 0 48px !important; /* Moderne Browser */
                        margin: 0 0 0 24px; /* IE */
                        border: 0 0 0 0;
                        padding: 0 0 0 0;
                        width: 110px;
                        height: 322px;
                        float: left;
                        font-weight: bold;
                        line-height: 1.5;
                        }

.stat                {
                        margin: 0 0 0 32px !important; /* Moderne Browser */
                        margin: 0 0 0 16px; /* IE */
                        border: 0 0 0 0;
                        padding: 0 0 0 0;
                        width: 158px;
                        height: 110px;
                        float: left;
                        }
Nachtrag: sollte die !important-Regel wiederum Probleme im IE7 bereiten, kann die Korrektur für den IE6 auch über einen "Condtional Comment" vorgenommen werden, um so den IE7 auszuschliessen:

Code: 
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen">
<!--[if lt IE 7]>
<style type="text/css">
.box                {
                        margin: 0 0 6px 12px; 
                        }

.navigation        {
                        margin: 0 0 0 24px; 
                        }

.stat                {
                        margin: 0 0 0 16px; 
                        }
</style>
<![endif]-->
 
@michaelsinterface

Danke, das habe ich jetzt verstanden und kann es auch anwenden.

Aber ich verstehe immer noch nicht das Problem der .top div's.
Die grösse aller div's ist identisch mit dem Gerüsst welches um alles herum ist.
Doch im IE 6 sieht es Sch**** aus, alles verschoben wie die grösse nicht stimmen würde.

Welche Regel muss man da anwenden?
 
Da ist etwas mit den Breitenangaben nicht stimmig, denn die umgebenden DIVs sind schmäler definiert, als die eingebundenen Links. So ist z.B. das DIV .top-1 75 Pixel und der Link .img1 106 Pixel breit.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück