Vorgabe: 3 gleich breite, zentriert dargestellte Flächen im CSS-Code:
<html>
<head>
<style type="text/css">
body { background-color:#E0E0E0;
text-align: center;
}
.ft { font-family: verdana,arial,sans-serif; font-size:10px; font-color: #A0A0A0;
}
#kasten1 {
position: static;
height: 100px;
width: 800px;
margin: auto;
padding: 15px;
padding-top: 35px;
background-color: #C0C0C0;
text-align: left;
}
#kasten2 {
position: static;
height: 500px;
width: 800px;
margin: auto;
padding: 15px;
background-color: #C4C4C4;
text-align: left;
}
#menu {
position: static;
height: 200px;
width: 800px;
margin: auto;
background-color: orange;
text-align: left;
}
</style>
</head>
<body>
<div id="kasten1">
<span class="ft">hallo</span>
</div>
<div id="menu">wewe</div>
<div id="kasten2"></div>
</body>
</html>
Ergebnis: ich bekomme 3 gleich breite Flächen (IE & Mozilla)
Wenn ich in #menu die Höhe auf 20px reduziere, zeigt IE alles korrekt an, Mozilla verschmälert die Breite.
Woran liegt's.