Bilby: Unterschiedliche margin-top Interpretation IE / Firefox

Beitrag lesen

Hallo,

ich habe folgendes Template (von < http://blog.html.it/layoutgala/> heruntergeladen und etwas modifiziert - da ich in CSS nicht besonders firm bin, hab ich für dieses Beispiel im ursprünglichen Template nur die Beispieltexte gekürzt und das margin-top hinzugefügt, sonst aber nirgends herumgepfuscht) mit IE 6, Firefox 1.5.0.3 und Opera 8.54 ausprobiert. In Opera und IE wird margin-top von #footer interpretiert, in Firefox NICHT. Hat jemand eine Idee, woran das liegt?
Vielen Dank für Eure Anregungen!
LG
Bilby

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Layout 36</title>  
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  
<style type="text/css">  
html,body{margin:0;padding:0}  
body{font: 76% arial,sans-serif;text-align:center}  
p{margin:0 10px 10px}  
a{display:block;color: #006;padding:10px}  
div#header{position:relative}  
div#header h1{height:80px;line-height:80px;margin:0;  
padding-left:10px;background: #EEE;color: #79B30B}  
div#header a{position:absolute;right:0;top:23px}  
div#container{text-align:left}  
div#content p{line-height:1.4}  
div#navigation{background:#B9CAFF}  
div#extra{background:#FF8539}  
div#footer{background: #333;color: #FFF;margin-top:20px}  
div#footer p{margin:0;padding:5px 10px}  
div#footer a{display:inline;padding:0;color: #C6D5FD}  
  
div#container{width:700px;margin:0 auto}  
div#content{float:right;width:500px}  
div#navigation{float:left;width:200px}  
div#extra{float:right;width:500px}  
div#footer{clear:both;width:100%}  
</style>  
<script type="text/javascript" src="filler.js"></script>  
</head>  
<body>  
<div id="container">  
<div id="header"><h1>Header</h1></div>  
  
<div id="wrapper">  
<div id="content">  
<p><strong>1) Content here.</strong> </p>  
</div>  
</div>  
<div id="navigation">  
<p><strong>2) Navigation here.</strong></p>  
</div>  
<div id="extra">  
<p><strong>3) More stuff here.</strong> </p>  
</div>  
<div id="footer"><p>The footer</p></div>  
</div>  
</script>  
</body>  
</html>