ul in div verhält sich irgendwie nicht so wie es sollte

nostra · #1 (**permalink**) 30.09.2009, 15:10

hey,

um es gleich auf den punkt zu bringen ich habe ein UL - Div Problem bei dem mir nicht klar ist warum sich der div der sozusagen "leer" ist so verhält;

Beispiel:

HTML-Code:

<!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>
	<title></title>
	<meta name="language" content="de" />
	<meta name="robots" content="INDEX,FOLLOW" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="description" content="" />		
	<meta name="keywords" content="" />
	<style type="text/css">
		html,body,p,ul,div
		{
			margin:0;
			padding:0;
		}
		
		body
		{
			background:#a70b16;
		}
		
		ul{
			list-style-type:none;
		}
		
		#main_page
		{
			min-height:548px;
			padding:22px 0px 0px 0px;
		}
		#content_body
		{
			width:803px;
			min-height:548px;
			margin:0 auto;
			border:0px solid black;
			z-index:1;
			background:#fff;
		}
		#nav_top
		{
			width:803px;
			height:80px;
			margin:125px 0px 0px 0px;
			background:#adadad;
		}
		#nav_top li
		{
			float:left;
		}
		
	</style>
</head>
<body>
<div id="main_page">
	<div id="content_body">
		<div id="header">&nbsp;
			<ul id="nav_top">
				<li><a href="/"><span>bla</span></a></li>
				<li><a href=""><span>blabla</span></a></li>
				<li><a href=""><span>bla</span></a></li>
				<li><a href=""><span>bla</span></a></li>
				<li><a href=""><span>bla</span></a></li>
				<li><a href=""><span>bla</span></a></li>
				<li><a href=""><span>bla</span></a></li>
				<li><a href=""><span>blabla</span></a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

Die UL hat einen margin-top Wert von 125px und verhält sich richtig in dem sie sich 125 px unter den Text richtet;

HTML-Code:

<!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>
	<title></title>
	<meta name="language" content="de" />
	<meta name="robots" content="INDEX,FOLLOW" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="description" content="" />		
	<meta name="keywords" content="" />
	<style type="text/css">
		html,body,p,ul,div
		{
			margin:0;
			padding:0;
		}
		
		body
		{
			background:#a70b16;
		}
		
		ul{
			list-style-type:none;
		}
		
		#main_page
		{
			min-height:548px;
			padding:22px 0px 0px 0px;
		}
		#content_body
		{
			width:803px;
			min-height:548px;
			margin:0 auto;
			border:0px solid black;
			z-index:1;
			background:#fff;
		}
		#nav_top
		{
			width:803px;
			height:80px;
			margin:125px 0px 0px 0px;
			background:#adadad;
		}
		#nav_top li
		{
			float:left;
		}
	</style>
</head>
<body>
<div id="main_page">
	<div id="content_body">
		<div id="header">
			<ul id="nav_top">
				<li><a href="/"><span>bla</span></a></li>
				<li><a href=""><span>blabla</span></a></li>
				<li><a href=""><span>bla</span></a></li>
				<li><a href=""><span>bla</span></a></li>
				<li><a href=""><span>bla</span></a></li>
				<li><a href=""><span>bla</span></a></li>
				<li><a href=""><span>bla</span></a></li>
				<li><a href=""><span>blabla</span></a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

Hier ist dasselbe Beispiel nur in dem Fall ohne dem "non breaking space" ich hätte allerdings erwartet dass sich die ul ebenfalls 125px nach unten verschiebt während der übergeordnete div sich so verhält wie im Beispiel oben - tut er aber nicht.
Weder IE8 noch FF 3.5 zeigen das "korrekt" an sehr wohl aber IE7, was mich vermuten lässt dass ich hier einen Fehler habe - aber ich sehe nicht welchen.

Hat einer von euch eine Ahnung was das sein könnte ?

danke für die Antworten

fricca · #2 (**permalink**) 30.09.2009, 15:21

Collapsing Margins (Google weiß viel dazu)

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18