nicht angemeldet
Inherited margin bug oder was sonst?
Hallo,
stark vereinfacht habe ich unten angefügten Quellcode. DOCTYPE und Struktur müssen so bleiben.
Der Forward-Button wird mittels einer Breite und margin-left (bitte hier kein float) in der rechten oderen Ecke des #content Divs platziert (mit dem gegebenen padding des #content Divs).
Mit genauen Pixelwerten funktioniert alles perfekt (außer 3px Bug in IE6 beim Inhalt).
Nun möchte ich aber gerne ems benutzen, habe alles umgerechnet und im Firefox sieht alles noch genau so aus wie es sein soll.
IE allerdings produziert einen anderen, nämlich viel größeren margin-left Wert für den Forward-Button, der dadurch zu weit rechts erscheint.
IE6 dehnt das #content Div bekanntlich fälschlicherweise mit aus. Da die Breite des umschließenden #main Div dafür aber nicht ausreicht, springt der #content unter die links-floatende #navigation.
IE7 zerstört zwar nicht das ganze Layout, der Button ist aber genau so weit rechts wie im IE6.
Ich dachte zunächst an den inherited margin bug, aber die Verschiebung ist nicht so groß wie das margin-left des elterlichen #content Div.
http://jaspan.com/ie-inherited-margin-bug-form-elements-and-haslayout
Und keine der Lösungsvorschläge dort bringt Erfolg. Die einzig brauchbare Lösung ist für mich bisher, dem Forward-Button das margin-left in Prozent zu geben.
Allerdings würde ich gerne das Problem verstehen, warum ems nicht funktionieren bzw. wo das zu große margin-left herkommt?
Hier nun der vereinfachte Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>IE's inherited margins bug?</title>
<style type="text/css">
body {
font: 75% Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5;
background: #CCC;
}
input, select, textarea {
text-align: left;
font: .916em Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #000;
padding: 2px;
}
#main {
width: 66.667em;
border: 1px solid blue;
margin: 1em;
}
#navigation {
padding: 0 1.667em;
float: left;
margin-bottom: 1em;
}
#navigation input {
color: #FFF;
background: green;
border: 0;
cursor: pointer;
width: 14.5em;
height: 2em;
padding-left: 2em;
}
#content {
background: #FFF;
margin: 0 0 0 16.667em;
padding: 1.667em;
width: 46.5em;
border: 1px solid #000;
}
.buttonSubmitJump {
background: red;
width: 13.64em;
text-align: right;
margin: 0 0 1em 37.1em;
padding: .182em 20px .45em .45em;
height: 2em;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main">
<div id="navigation">
<form name="Home" action="" method="POST">
<input type="submit" name="Home" value="Home" title="Home">
</form>
</div>
<div id="content">
<form action="" method="POST">
<input type="submit" name="submit" value="forward" class="buttonSubmitJump" title="forward">
</form>
</div>
</div>
</body>
</html>