Hallo Forum,
folgendes Problem ist mir so ähnlich schon öfter aufgekommen und ich würde gerne wissen, was da genau passiert bzw. was genau ich da eigentlich falsch mache.
Ich habe eine Liste. Per CSS definiere ich den li's einen top Margin um die Listeneinträge weiter voneinander zu trennen. Im Firefox verschiebt sich neben den li's nun auch die komplette ul, als hätte ich diesem Element ebenfalls einen top-margin gegeben. Warum reagiert der FF hier so und wie kann ich das umgehen ... ?
Online HTML:
margin
Screenshot IE:
http://www.djdwarf.de/raver/margin_ie.gif (IE 6)
Screenshot FF:
http://www.djdwarf.de/raver/margin_ff.gif (FF 1.5)
Quellcode:
PHP-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>margin</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
html{
overflow-y:scroll;
}
body{
margin:0;
padding:0;
background:#CC0000;
font:11px Verdana, Arial, Helvetica, sans-serif;
color:#000;
}
img{
border:none;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
margin:0;
padding:0;
}
#container{
position:relative;
margin:0 auto;
width:907px;
}
#head{
margin:0;
padding:0;
position:relative;
height:100px;
background:#FFF;
}
/* ------------- SERVICE NAVIGATION ------------- */
#service_box{
position:absolute;
top:0;
right:0;
height:90px;
width:678px;
}
#service_navigation{
position:absolute;
top:20px;
right:110px;
}
#service_navigation li{
position:relative;
float:left;
height:20px;
overflow:show;
padding:0 0 0 12px;
color:#C00;
}
#service_navigation a{
color:#000;
text-decoration:none;
}
#service_navigation a:hover{
color:#A00;
}
#service_navigation li span{
margin:0 0 0 12px;
}
/* ------------- MAIN NAVIGATION ------------- */
#main_navigation{
position:relative;
margin:14px 0 0 0;
padding:0;
height:20px;
}
#main_navigation li{
float:left;
height:20px;
width:204px;
background:#333;
}
#main_navigation li.active{
background:#CCC;
}
#main_navigation li a{
display:block;
height:20px;
width:204px;
text-decoration:none;
}
#main_navigation li span{
position:relative;
top:2px;
left:10px;
font:bold 12px Helvetica, Verdana, Arial, sans-serif;
color:#FFF;
}
#main_navigation li.active span{
color:#900;
}
/* ------------- CONTENTBOX ------------- */
#content_box{
position:relative;
margin:0;
padding:0;
background:#FFF;
}
/* ------------- BREADCRUMB ------------- */
#breadcrumb{
padding:5px 0 5px 210px;
font-size:10px;
}
#breadcrumb a{
color:#000;
text-decoration:none;
}
/* ------------- NAVIGATION ------------- */
#navigation{
height:255px;
width:204px;
background:#CCC;
}
#navigation li{
margin:40px 0 0 12px; /* sobald die li einen top Margin bekommt, verzieht sich die gesamte ul*/
}
#navigation li a{
padding:0 0 0 10px;
background:url(../images/navi_arrow.gif) no-repeat left;
color:#000;
text-decoration:none;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="head">
<div id="service_box">
<ul id="service_navigation">
<li><a href="">Kontakt</a><span>|</span></li>
<li><a href="">Impressum</a><span>|</span></li>
<li><a href="">AGB</a><span>|</span></li>
<li><a href="">Sitemap</a><span>|</span></li>
</ul>
</div>
</div>
<ul id="main_navigation">
<li class="active"><span>Kat 1</span></li>
<li><a href=""><span>Kat 2</span> </a></li>
<li><a href=""><span>Kat 3</span> </a></li>
<li><a href=""><span>Kat 4</span> </a></li>
</ul>
<div id="content_box">
<div id="breadcrumb"> Sie befinden sich hier >> <a href="">123</a></div>
<ul id="navigation">
<li><a href=""><span>Navigation 1</span> </a></li>
<li><a href=""><span>Navigation 2</span> </a></li>
<li><a href=""><span>Navigation 3</span> </a></li>
<li><a href=""><span>Navigation 4</span> </a></li>
</ul>
</div>
</div>
</body>
</html>
Bin für jeden Ratschlag dankbar.
Gruß,
Sascha