Falsche Darstellung im IE

Heavenfighter · #1 (**permalink**) 16.11.2006, 10:24

Hallo,

ich möchte mir ein Layout erstellen, bei dem ich unter anderem 2 divs nebeneinander habe und das eine feste Höhe hat.
Das content div soll hierbei mit overflow arbeiten, damit es einen Scrollbalken gibt, wenn der Inhalt zu viel wird.

Hier erst mal der Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="de" />
	<title>Tstlayout</title>
	<style type="text/css" media="screen">

		/* Gleichberechtigung für alle Browser */
		* 
		{
			margin	:0;
			padding	:0;
			border	:0;
			
			font-size	: 100.01%;
		}
		
		
		html,body 
		{
			font		:.9em/1.3em Georgia, Verdana, Arial, Helvetica, sans-serif;
			background	:#EAD1B0;
			color		:#555;
			text-align	:center;
		}

		#container
		{
			width		: 760px;
			position	: absolute; 
			top			: 50%; 
			left		: 50%;
			color		: #333;
			border		: 1px solid grey;
			margin		: -240px 0 0 -382px;
			text-align	:left;
			padding		:0px;
			
		}
		
		#top
		{
			height: 120px;
			padding: .5em;
			background-color: #ddd;
			border-bottom: 1px solid gray;
		}
		
		#top h1
		{
			padding: 0;
			margin: 0;
		}
		
		#wrapper
		{
			height	: 360px;
			border	: none;
			margin	: 0px;
			padding	: 0px;
		}
		
		#leftnav
		{
			float: left;
			width: 160px;
			margin: 0px;
			height: 100%;
			padding: 10px 10px 0px 10px;
			background-color: #fff;
			overflow:auto;
		}
		
		#content
		{
			margin: 0;
			background:#f2f2f2;
			height: 100%;
			overflow:auto;
			border-left: 1px solid gray;
			padding: 5px;
		}
		
		#footer
		{
			height: 30px;
			clear: both;
			margin: 0;
			padding: .5em;
			color: #333;
			background-color: #ddd;
			border-top: 1px solid gray;
		}
		
		#leftnav p { margin: 0 0 1em 0; }
		#content h2 { margin: 0 0 .5em 0; }
</style> 
</head>
<body >

<div id="container">
	<div id="top">
		<h1>Header</h1>
	</div>
	
	<div id="wrapper">
		<div id="leftnav">
			<ul>
				<li>djhfjsdhf</li>
				<li>djhfjsdhf</li>
				<li>djhfjsdhf</li>
				<li>djhfjsdhf</li>
				<li>djhfjsdhf</li>
				<li>djhfjsdhf</li>
				<li>djhfjsdhf</li>
			</ul>
		</div>
		
		<div id="content">
			<h2>Subheading</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
		</div>
	</div>

	<div id="footer">
		Footer
	</div>
</div>


</body>
</html>

Nun zu meinem Problem. Im IE ist zwischen dem <div id="leftnav"> und dem <div id="content"> eine ca. 3px breite Spalte.
In anderen Browsern tritt dieses Verhalten nicht auf.

Habe ich irgendwo einen Fehler begangen, oder muss man für den IE eine extra Wurst einbauen?

Ich danke euch schon mal im voraus.

heiko_rs · #2 (**permalink**) 16.11.2006, 10:29

IE 5 & 6 lassen zwischen Floats und Non-Floats 3px Abstand. Einfachste und sinnvollste Lösung in Deinem Fall (da Du mit fester Breite arbeitest): #content ebenfalls floaten (Breite vergeben!).

Außerdem: Zentriere nicht per position: absolute; (siehe kleines Browserfenster!), sondern schau in die FAQ im CSS-Forum. Und schmeiß div#top raus (ist überflüssig) und gib h1 die ID. Dasselbe bei #leftnav; wirf das div raus und gib ul die ID.

Heavenfighter · #3 (**permalink**) 16.11.2006, 10:37

Ah,

vielen dank.
Also ich lasse jetzt das content div ebenfalls per

Code:

float:left;

floaten und vergebe eine breite von width: 569px;
Die Breite habe ich herausgefunden durch "herantasten".
Eigentlich dachte ich ich müsste von der Gesamtbreite des Containerdivs 760 einfach die Breite des Menüs und der Borders abziehen. Das passt dann aber nicht.

Wie komme ich denn rein rechnerisch auf den Wert?
Und noch mal zum Verständnis für mich, wieso kann ich bei der Breite nicht sagen 100%?
Liegt das an dem float?

heiko_rs · #4 (**permalink**) 16.11.2006, 10:45

Zitat:

Zitat von Heavenfighter

Eigentlich dachte ich ich müsste von der Gesamtbreite des Containerdivs 760 einfach die Breite des Menüs und der Borders abziehen.

Nicht nur Breite und borders, sondern auch seitliches padding, das sowohl das Menü und Content haben.

Zitat:

Zitat von Heavenfighter

wieso kann ich bei der Breite nicht sagen 100%?

100% bezieht sich auf die Breite des Elternelementes, und das paßt nicht, denn erstens nimmt das Menü ja auch Platz ein, und zweitens ist der Content eh breiter als 100% (wegen padding & border). Das gilt übrigens auch für Deine 100%-Höhen: Sie hauen nicht hin, denn Du hast jeweils padding-top und/oder -bottom.

Heavenfighter · #5 (**permalink**) 16.11.2006, 10:48

Ah, ja klar.
Das padding habe ich vergessen.
Ok, das mit den 100% leuchtet mir ein, aber bei der Höhe funktionierts in allen Browsern damit.

Ist dann aber wohl nicht sehr sauber?
Also auch lieber für die Höhe feste Angaben verwenden?

heiko_rs · #6 (**permalink**) 16.11.2006, 10:50

Zitat:

Zitat von Heavenfighter

Ist dann aber wohl nicht sehr sauber?

Du sagst es

Zitat:

Zitat von Heavenfighter

Also auch lieber für die Höhe feste Angaben verwenden?

Genau.

Und immer an IE 5.x-Boxmodell-Korrekturen denken!

Heavenfighter · #7 (**permalink**) 16.11.2006, 10:53

Oje,

kannst du mir da noch mal auf die Sprünge helfen?
Was genau muss ich beachten?

heiko_rs · #8 (**permalink**) 16.11.2006, 11:06

Der IE 5.x rechnet padding & border nicht dazu, er braucht also entsprechend höhere Werte für Breite bzw. Höhe. Zuweisen z.B. per Conditional Comment oder Hack.

Heavenfighter · #9 (**permalink**) 16.11.2006, 11:13

Super vielen Dank.

Ich mag dieses Forum, immer schnelle und kompetente Hilfe

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
falsche Darstellung im IE 5,6 + 7	chris610	CSS	2	11.09.2009 13:07
falsche Darstellung (Überlappen) im FF2 (h2,table,div)	chilla	CSS	2	12.05.2008 15:18
Falsche Darstellung unter IE..(Nach "height")	craxer	CSS	2	22.07.2006 01:52
CSS: Falsche Darstellung Opera+IE	ONeill	CSS	10	09.03.2006 15:10
IE falsche darstellung von border eigenschaften	hackenbusch	CSS	2	20.06.2005 15:48