✔ Höhe im IE

[herrgarnele]

Guten Morgen zusammen,

ich stehe ziemlich ratlos vor einem Problem über das ich eben gestolpert bin:
Ich habe 3 Container übereinander positioniert, die alle zwischen 1 und 10px hoch sind. Im FF ist alles korrekt, der IE jedoch weitet die Höhe von allen drei Conatinern auf 19px aus (siehe angehängte jpgs)

Ist wahrscheinlich nur ein Dumm-Fehler meinerseits, aber ich steig nicht dahinter..

body{
    margin:0;
    padding:0;
    text-align:center;
}
#wrapper{
    width:800px;
    margin:0 auto;
}
#oben{
    background:#f00;
    width:800px;
    height:2px;
}
#mitte{
    background:#0f0;
    width:800px;
    height:5px;
}
#unten{
    background:#00f;
    width:800px;
    height:1px;
}

<div id="wrapper">
    <div id="oben"></div>
    <div id="mitte"></div>
    <div id="unten"></div>
</div>

 

[kalle123456]

Hallo,

der IE nimmt immer den Standard font-size, also müsste dein css so aussehen.

body{
    margin:0;
    padding:0;
    text-align:center;
}
#wrapper{
    width:800px;
    margin:0 auto;
}
#oben{
    background:#f00;
    width:800px;
    font-size:2px;
    line-height:2px;
}
#mitte{
    background:#0f0;
    width:800px;
   font-size:5px;
    line-height:5px;
}
#unten{
    background:#00f;
    width:800px;
    font-size:1px;
    line-height:1px;
}

 

[Maik]

Hi,

setz in den Blöcken einfach zusätzlich overflow:hidden ein, damit der IE die gewünschte Höhe einhält, und keinen Platzhalter einfügt, der sich an der globalen Schriftgröße orientiert:

#oben{
    background:#f00;
    width:800px;
    height:2px;
    overflow:hidden;
}
#mitte{
    background:#0f0;
    width:800px;
    height:5px;
    overflow:hidden;
}
#unten{
    background:#00f;
    width:800px;
    height:1px;
    overflow:hidden;
}

 

[herrgarnele]

Maik,

das war's. Vielen Dank!