4. Double margin Bug im IE

Double margin Bug im IE

  • ?

    Hallo,

    habe folgendes 2-Spalten-Layout auf einer Seite: Links ein Menü mit position:absolute und rechts daneben den Content-Div mit position:relative und einem margin-left (entspricht Breite des Menüs, um Content rechts daneben auszurichten). Das tut prinzipiell ganz gut, nur im IE gibts Probleme, wenn ich z.B. im Content-Div einen weiteren div habe, das nur einen Button enthält (z.B. mit text-align:left oder so). Der Button wird dann merkwürdigerweise immer nochmal um das margin das für den Content angegeben nach links verschoben (also 2 mal). Im Firefox oder Safari wird der Button jedoch korrekt links ausgerichtet im Content angezeigt.

    Hab schon probiert margin und padding des betroffenen divs auf 0 zu setzen, hat jedoch nix gebracht. Ein float: left für den Menü-Teil will ich nicht verwenden, da es im IE 6, damit manchmal andere Probs gibt (Content-Teil wird in manchen Fällen nach unten verschoben).

    Im Inet findet man zu "double margin bug" auch einiges. Jedoch beziehen sich die Lösungen meist auf divs, die mit float ausgerichtet wurden (in dem Fall genügt wohl ein display: inline für das betroffene div).

    Wie bekomme ich das anscheinend doppelt gesetzte margin im IE weg?

    0
  • ?

    Sollte vielleicht noch dazu sagen, dass der Menü-Bereich links eine feste Breite (z.B. 250px) und der Content-Teil rechts den jeweiligen Rest des Browser-Fensters haben soll. Sonst wäre es ja trivial über floats zu regeln gewesen.

    0
  • ?

    Bin dem Problem mal mit nem Minimalbeispiel auf den Grund gegangen: Scheint nur dann aufzutreten, wenn für das betroffene div die width gesetzt wird.

    PS: Wird der untere Button bei Euch im IE 7 auch mit so hässlich dicken Rändern dargestellt? Lustig is auch, dass die Background-Color beim div für den oberen Button im IE 7 verschwindet, wenn man das Fenster klein zieht.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
* {margin: 0; padding: 0;}

#menu {
position:absolute;
top: 0px;
left: 10px;
width: 230px;
background-color: blue;
}

#content {
position:relative;
margin-left: 250px;
background-color: green;
}
</style>
</head>
<body>
<div id="menu">Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu
 Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu
</div>

<div id="content">
<div>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
</div>

<form>
<div style="text-align:center; background-color: #888;">
<input type="submit" value="Richtig zentriert" /> 
</div>

<div style="width: 100%; text-align:center; background-color: #bbb;">
<input type="submit" value="Falsch zentriert im IE 7" /> 
</div>
</form>

</div>
</body>
</html>
    0
  • ?
     

    <div style="text-align:center; background-color: #bbb;">
<input type="submit" value="Falsch zentriert im IE 7" />

    Das width weglassen.

    0
Anmelden zum Antworten