ul in div verhält sich irgendwie nicht so wie es sollte
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">
<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 :) |
