✔ Unerwünschte Lücke im 3-spaltigen Layout

K

karl123

Erfahrenes Mitglied
Hallo allerseits,

Ich habe ein 3-splatiges Layout mit Kopf- und Fußzeile erstellt. Jetzt erhalte ich je nach Browser eine nicht erwünschte Lücke zwischen Kopfzeile und Mittelteil und zwischen Mittelteil und Fußzeile.
IE7: keine Lücke; so möchte ich es gerne haben
Firefox 3: Lücke zwischen Kopfzeile und Mittelteil, Lücke zwischen Mittelteilund Fußzeile
Opera 9: Lücke zwischen Kopfzeile und Mittelteil
Safari: Lücke zwischen Kopfzeile und Mittelteil
Die Lücke zeigt sich im Layout als brauner Streifen. Der braune Streifen ganz unten ist ok; er kommt vom Padding des Containers.
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>meine Webseite</title>
<style type="text/css" media="screen">
/*---------------------------------Allgemein------------------------------------*/
/* Standard für html in allen Browsern */
html, body { 
	margin:0px; border:0px; padding:0px;
}
html {
	top:0; left:0; right:0;
}

/*---------------------------Schrift und Hintergrund----------------------------*/
body {
	padding:0px; 
	margin:auto;
	width:90%; /* Breite der Seite */
	font-family:Arial, Helvetica, sans-serif; /* Schrift und Schriftfamilie */
	font-size:1em; /*Schriftgroesse hier relativ festlegen */
	background:#FFFCC8 url("../pictures_root/rose.gif"); /* Hintergrundfarbe und Bild */
	background-repeat:no-repeat;
	background-position:top left;
	background-attachment:fixed;
}

/*------------------------------Seiten-Container--------------------------------*/
#container {
	margin:40px 0px 0px 0px;
	padding:0px 0px 40px 0px;
	background-color:#990000;
}
/*-----------------------------------Header-------------------------------------*/
#header {
	position:relative;
	display:block;
	width:100%;
	height:140px; /* Höhe des Headers */
	background:#FFCCCC url("sunset140_2.jpg"); /* Farbe und Bild des Hintergrunds */
	background-repeat: repeat-x;
	background-position: left top;
}

/*------------------------Seite zwischen Header und Footer-----------------------*/
#page_outer {
	position:relative;
	display:block;
	border-left:160px solid #00FFFF; /* Breite der linken Seite und Farbe */
	border-right:100px solid #FFFF00; /* Breite der rechten Seite und Farbe */
}
#page_inner {
	position:relative;
	display:block;
	margin-left:-160px; /* Breite der linken Seite */
	margin-right:-100px; /* Breite der rechten Seite */
}
.clear {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*---------------------------------linke Seite-----------------------------------*/
#left_container {
	position:relative;
	float:left;
	left:0px;
	width:160px; /* Breite der linken Seite */
}

/*---------------------------------rechte Seite-----------------------------------*/
#right_container {
	position:relative;
	float:right;
	right:0px;
	width:100px; /* Breite der rechten Seite */
}

/*-----------------------------------Footer-------------------------------------*/
#footer {
	display:block;
	width:100%;
	height:50px; /* Hoehe des Footers */
	background:#FF00FF url("sunset140_2.jpg"); /* Farbe und Bild des Hintergrunds */
	background-repeat: repeat-x;
	background-position: left top;
}

/*-----------------------------------Content-------------------------------------*/
#content {
	position:relative;
	display:block;
	margin-left:160px; /* Breite der linken Seite */
	margin-right:100px; /* Breite der rechten Seite */
	height:1%;
	background-color:#EEEECC;
}
</style>
</head>

<body>
<!-- Container für Seite -->
<div id="container">

<!-- Header -->
<div id="header">Das ist der Header
	<div id="header_logo">Logo</div>
	<div id="header_login">Ein Login-Bereich</div>
	<div id="header_search">Ein Such-Bereich</div>
	<div id="header_links">Links</div>
	<div id="header_sitemap">Eine Sitemap</div>
	<div id="header_menu">Ein Men&uuml;</div>
</div>

<!-- wird benötigt für festes Layout -->
<div id="page_outer">
	<div id="page_inner">

<!-- linke Seite -->
		<div id="left_container">Das ist die linke Seite
				<div id="left_login">Ein Login-Bereich</div>
				<div id="left_search">Ein Such-Bereich</div>
				<div id="left_menu">Ein Men&uuml;</div>
				asdfsa<br />
		</div>

<!-- rechte Seite -->
		<div id="right_container">Das ist die rechte Seite
				<div id="right_login">Ein Login-Bereich</div>
				<div id="right_search">Ein Such-Bereich</div>
				<div id="right_links">Links</div>
				<div id="right_menu">Ein Men&uuml;</div>
		</div>

<!-- Mitte-Inhalt -->
		<div id="content">

			<p class="normtext">Ullamco
  		laboris nisi ut enim ad minim veniam, consectetur adipisicing elit. Sunt
  		in culpa velit esse cillum dolore excepteur sint occaecat. Lorem ipsum
  		dolor sit amet, ut labore et dolore magna aliqua. Quis nostrud exercitation
  		sunt in culpa duis aute irure dolor. Excepteur sint occaecat in reprehenderit
  		in voluptate qui officia deserunt. Mollit anim id est laborum. Velit esse
  		cillum dolore ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
  		amet, eu fugiat nulla pariatur. Ut enim ad minim veniam, ut aliquip ex
  		ea commodo consequat. Excepteur sint occaecat ut labore et dolore magna
  		aliqua. Velit esse cillum dolore lorem ipsum dolor sit amet, eu fugiat
  		nulla pariatur. In reprehenderit in voluptate sunt in culpa sed do eiusmod
  		tempor incididunt. Ut aliquip ex ea commodo consequat. Excepteur sint occaecat
  		quis nostrud exercitation duis aute irure dolor. Ut enim ad minim veniam.
  		In reprehenderit in voluptate sed do eiusmod tempor incididunt duis aute
  		irure dolor.</p>

		</div>

<!-- wird benötigt für festes Layout -->
		<div class="clear"></div>
	</div>
</div>

<!-- Footer -->
<div id="footer">Das ist der Footer. Das ist der Footer. Das ist der Footer.
  Das ist der Footer. Das ist der Footer.</div>

</div>
</body>
</html>

Wo liegt mein Fehler?
 
Hi,

du hast vergessen, die voreingestellte äußere Polsterungseigenschaft des p-Elements auf null zurückzusetzen:

Code: 
.normtext {
    margin:0;
}


Oder zu Beginn des Stylesheets den Universalselektor * notieren, der alle im HTML-Dokument enthaltenden Elemente miteinbezieht:

Code: 
* {
    margin:0;
    padding:0;
}


Der IE6 erzeugt zwischen den drei Spaltenblöcken (#left_container, #content, #right_container) ebenfalls eine unerwünschte Lücke, Stichwort: "3px-Gap-Bug" - siehe hierzu meinen Webmaster-FAQ-Artikel CSS Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?.

Und das inhaltsleere DIV .clear zum "clearen" liesse sich auch durch CSS ersetzen -> How To Clear Floats Without Structural Markup.

mfg Maik
 
Das war es. Ich habe den Universalselektor notiert.
Vielen Dank für deine Hilfe.

Zu deinem Hinweis mit dem IE6: dessen Probleme umgehe ich mit den IE7 Script.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück