Untersachiede IE / Firefox

[Thomas]

Hallo,

ich habe auf den Forumsrat mein Layout nun auf CSS umgestellt, jedoch große Probleme mit verschiedenen Browser, genauer gesagt IE und Firefox. Anbei meine Layout-Definitionen. Das merkwürdige ist, dass ohne Inhalt das Layout in beiden Browsern identisch dargestellt wird, sobald aber inhalt rein kommt verschiebt sich das Manü und der Inhaltscontainer. Height-Angaben bewirken nichts, da sie im IE völlig anders dargestellt werden, bei width-Angaben passiert das nicht, was ich schon mal nicht verstehe. Hab's nun mit Abstandsangaben (margin/padding) sowie mit relativer und fixer Positionierung versucht, auch hier schon in der Vergangenheit gegebene Tipps konnten mir nicht helfen.
Hier nun mal der Code:

body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}
#container
{
margin: 1em auto;
width: 900px;
text-align: center;
background-color: red;
border: 1px solid black;
}

#header
{
height: 67px;
background-color: fuchsia;
background-image: url(back.gif);
background-repeat: no-repeat
}
#mainnav
{
height: 23px;
background-color: green;
background-image: url(back.gif);
background-repeat: no-repeat;
}

#menu
{
            float: left;
width: 130px;
            height: 300px;
background-color: yellow;
background-image: url(glas.gif);
            position: relative;
}
#contents
{
            float: right;
            width: 770px;
background-color: #444444;
            color: #dddddd;
            margin:auto;
            height: 490px;
}
#footer
{
            clear: right;
            height: 20px;
            margin-bottom: 0px;
background-color: lime;
background-image: url(background_grau.gif);
}

Vielleicht sind noch kleinere Fehler drin, aber im Großen und Ganzen sollte das an sich passen. Wie gesagt, mein Problem ist, dass Manue und Contents-Container bei Befüllung mit Inhalt ein "Eigenleben" entwickeln, dass ich nur zu gerne unterbinden würde.

Viele Grüße,
Thomas