Unterschiedliche margin-top Interpretation IE / Firefox
0 0 0 
at
0
Unterschiedliche margin-top Interpretation IE / Firefox
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>
-
Hoi,
In Opera und IE wird margin-top von #footer interpretiert, in Firefox NICHT. Hat jemand eine Idee, woran das liegt?
Es wird von beiden interpretiert. Nur der IE interpretiert es "anderst". Bei dem #footer ist das Margin schon vorhanden, nur ist die Höhe des floatenden #extras größer als das Margin. Deswegen schiebt es den #footer Container um die Höhe des #extras nach unten und läßt den #footer direkt an den #extra anschließen. Das Margin ragt dann einfach nach oben raus und wird teilweise von #extra verdeckt.
FF == richtiges Verhalten, IE nicht so wirklich, zumindest soweit ich das verstanden habe.
Zur Behebung: Schieb noch ein weiteres div vor dem footer ein.
<div class="breaker"></div
mit folgendem CSS:
div.breaker {
height: 1px;
clear:both;
overflow:hidden;
}
Und wenn das Margin dann wirklich exakt 10px sein soll, dann solltest du es mit 9px festlegen, da ja noch das 1px hohe Div darüber dazu kommt.Gruß Ben
-
Vielen Dank! Das mit dem "Zwischen-div" hat funktioniert.
LG
Bilby-
Ich muss halt auch versuchen, den Klugscheissern naeher zu kommen.
Aber diesen http://forum.de.selfhtml.org/archiv/2005/7/t111110/#m698570@ttitle=Standart werde ich wohl nie erfuellen ^^
-
-
Hallo.
Nur der IE interpretiert es "anderst".
Jedenfalls die schwäbische Version.
MfG, at
-
-
Hallo Bilby.
[code lang=english]
Es ist zwar nicht falsch, aber [code lang=css] und [code lang=html] wären hier geeigneter gewesen.
Einen schönen Montag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]