✔ Darstellungsprobleme eines Layout im IE vs. FF

Rexo · 16. November 2005

Hallo Leute,

wie im Titel bereits geschreiben, hab ich ein Problem mit einer unterschiedlichen Darstellungweise eines Layouts.

Ich hab den CSS-Code mal in der Datei gelassen, um diese schnell lokal testen und korrigieren zu können.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>	

<style type="text/css">
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #6B8CA5;
	font-family: Arial, Helvetica, sans-serif;
	color: white; /* TEST */	
	font-size: 11px;
	text-align: center;
}
#layout {
	margin: 0px auto 0px auto;
	width: 604px;
	text-align: left;
	background-color: white; /* TEST */	
}
										/* Head-Bereich */										
#head {
margin: 5px 3px 0px 7px;	/* 2px Rand bei margin-left dazuaddiert (5+2) */
width: 592px;
height: 167px;
}

	#logo {
		float:left;
		width:330px;
		height: 126px;
		background-color: Lime; /* TEST */	
	}
	#symbole {
		float: left;
		width: 262px;
		height: 126px;
		background-color: InfoBackground;
	}
	#navigation {
		clear:left;
		height: 24px;
		width: 592px;
		background-color: green;
	}
	#abschluss {
		height: 17px;
		width: 592px;
		background-color: ThreedLightShadow;		
	}

	
                                               /* Content */
#eins {
	float: left;
	margin: 18px 0px 0px 7px;
	height: 184px;
	width: 513px;
	background-color: Green;
}

#zwei {
	float: right;
	margin: 10px 5px 27px 0px;
	height: 184px;
	width: 513px;
	background-color: red;
}

	
                                                      /* Footer */

#footer {
	clear: both;
	width:604px;
	height:120px;
	margin: 0;
	background-color: Aqua;
}

                                                      /* Copyright */

#copyright {
	clear: both;
	margin: 0px auto 0px auto;
	background-color: Red;
	width: 604px;
	height:45px;
}
</style>

</head>
<body>

<div id="layout">
									<!-- Head - Bereich -->
   <div id="head">
     <div id="logo"></div>
     <div id="symbole"></div>
     <div id="navigation"></div>
     <div id="abschluss"></div>
   </div>
								<!-- Content Bereich -->
   <div id="eins"></div>
   <div id="zwei"></div>
									<!-- Footer Bereich -->
   <div id="footer"></div>

</div>
<div id="copyright"></div>

</body>
</html>

Link zum online betrachten

Folgende Probleme treten auf:

Beim Firefox:
- erscheint zwischen der kompletten Webseite und dem Browser-Fenster ein 5px Abstand in der Hintergrundfarbe (blau) (scheint an margin und padding zu liegen, doch sind beide bereits auf 0px gestellt)
-> Die 5px Abstand soll schon erscheinen, doch mit! der Content!!-Hintergrundfarbe (weiss), daher steht es auch im #head als margin: 5px etc. drin.
(im IE wird es "richtig" dargestellt)

Beim IE:
- die beiden grünen div's (#eins und #zwei) werden nicht korrekt dargestellt- #eins sollte margin-left: 7px haben (dargestellt 14px). #zwei sollte margin-right: 5px haben (dargestellt 14px)
~~~ wenn ich den Body-Bereich zusammenschiebe (ohne Leerzeichen, die der IE als Text interpretieren "könnte") haben beide einen Abstand von 10px.

(im FF wird es richtig dargstellt)

Bin über jede Hilfe sehr dankbar. Ich seh den Wald vor lauter Bäumen wohl nicht mehr (und das schon seit ner Stunde :-( )

Grüsse,
Rexo

PS:
FF-Version: 1.0.7
IE-Version: 6.0.2800.1106

Maik · 17. November 2005

Für das Darstellungsproblem im FireFox habe ich leider (noch) keine Lösung parat

Was den IE betrifft, der die margin -Angaben für floatende DIVs verdoppelt, so lassen sich mit Hilfe des Star-HTML-Hacks die margin -Angaben korrigieren.

Code:

#eins {
	float: left;
	margin: 18px 0px 0px 7px;
	height: 184px;
	width: 513px;
	background-color: Green;
}

* html #eins /* Korrektur für IE */
{
margin: 18px 0px 0px 3.5px;
}

#zwei {
	float: right;
	margin: 10px 5px 27px 0px;
	height: 184px;
	width: 513px;
	background-color: red;
}

* html #zwei /* Korrektur für IE */
{
margin: 10px 2.5px 27px 0px;
}

Rexo · 17. November 2005

Vielen Dank für die Hilfe mit dem margin-Fehler beim IE.

Der Star-HTML-Hack funktioniert ohne Probleme

Ein andere Hack (den ich durch margin-Bug im IE gefunden hab) ist dem entsprechenden
div ein "display: inline;" zugeordnet.
Der Artikel ist unter:

http://www.positioniseverything.net/explorer/floatIndent.html

zu finden.

Dem anderen Problem mit dem FF werd ich heute Mittag mal durch schrittweisen Aufbau des Layouts begegnen.. mal schauen ab welchem Punkt der Fehler auftritt. ;-]

Grüsse,
Rexo

Rexo · 17. November 2005

Hab den vermeitlichen "Fehler" entdeckt

~~~
Es liegt am margin-top-Wertes des #head - div's.
~~~
Wenn man statt des margin-top-Wertes auf den padding-Bereich ausweicht, funktioniert es im FF und auch IE

Ich hab nun den geänderten Code erneut gepostet (mit dem Tausch des margin und padding-Wertes für den #head Bereich und den Star-HTML-Hack hab ich nun auch eingebaut)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>	

<style type="text/css">
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #6B8CA5;
	font-family: Arial, Helvetica, sans-serif;
	color: white; /* TEST */	
	font-size: 11px;
	text-align: center;
}
#layout {
	margin: 0px auto 0px auto;
	width: 604px;
	text-align: left;
	background-color: white; /* TEST */	
}
										/* Head-Bereich */										
#head {
margin: 0px 3px 0px 7px;	/* 2px Rand bei margin-left dazuaddiert (5+2) */
padding-top: 5px;
width: 592px;
height: 167px;
}

	#logo {
		float:left;
		width:330px;
		height: 126px;
		background-color: Lime; /* TEST */	
	}
	#symbole {
		float: left;
		width: 262px;
		height: 126px;
		background-color: InfoBackground;
	}
	#navigation {
		clear:left;
		height: 24px;
		width: 592px;
		background-color: green;
	}
	#abschluss {
		height: 17px;
		width: 592px;
		background-color: ThreedLightShadow;		
	}

	
                                               /* Content */
#eins {
	float: left;
	margin: 18px 0px 0px 7px;
	height: 184px;
	width: 513px;
	background-color: Green;
}
* html #eins /* Korrektur für IE */
{
margin: 18px 0px 0px 3.5px;
}
#zwei {
	float: right;
	margin: 10px 5px 27px 0px;
	height: 184px;
	width: 513px;
	background-color: red;
}
* html #zwei /* Korrektur für IE */
{
margin: 10px 2.5px 27px 0px;
}
	
                                                      /* Footer */

#footer {
	clear: both;
	width:604px;
	height:120px;
	margin: 0;
	background-color: Aqua;
}

                                                      /* Copyright */

#copyright {
	clear: both;
	margin: 0px auto 0px auto;
	background-color: Red;
	width: 604px;
	height:45px;
}
</style>

</head>
<body>

<div id="layout">
									<!-- Head - Bereich -->
   <div id="head">
     <div id="logo"></div>
     <div id="symbole"></div>
     <div id="navigation"></div>
     <div id="abschluss"></div>
   </div>
								<!-- Content Bereich -->
   <div id="eins"></div>
   <div id="zwei"></div>
									<!-- Footer Bereich -->
   <div id="footer"></div>

</div>
<div id="copyright"></div>

</body>
</html>

.... macht für mich keinen Sinn, warum der margin-top-Wert nicht korrekt dargestellt werden kann.
Der Umweg mit dem padding ist nicht optimal.. aber wenn es nicht anders geht (was mich nicht so recht vorstellen kann

) - hab ich wohl keine Wahl, oder?

Maik · 17. November 2005

Rexo hat gesagt.:
Hab den vermeitlichen "Fehler" entdeckt
~~~
Es liegt am margin-top-Wertes des #head - div's.
~~~
Wenn man statt des margin-top-Wertes auf den padding-Bereich ausweicht, funktioniert es im FF und auch IE

Dann markiere das Thema bitte auch als 'erledigt', vielen Dank

✔ Darstellungsprobleme eines Layout im IE vs. FF

Rexo

Mitglied

Maik

Rexo

Mitglied

Rexo

Mitglied

Maik

Neue Beiträge