Design verzogen - CSS Problem

[dominikus]

Hallo miteinander, ich bin relativ neu in CSS und habe das Problem, dass mein Design im IE unter Version 7 verzogen ist, und zwar wie folgt: (In Forefox kein Problem).

http://www.golfianer.de/bild.png

Der mittlere Teil "flutscht" also nach unten. So stehts in meinem CSS:

Vielen Dank!
Dominik

CODE body {
background-color: #dce9f5;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;

}
a {color: #003c80;}
a:visited {color:#DB7093;}
a:hover {color: #564b47;}
a:active { color:#000000;}

h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #E0A3B7;
border-top:1px solid #564b47;
border-bottom:1px solid #564b47;
padding:5px 15px;
margin:0px }
h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
.small {
FONT-SIZE: 8pt
}
.menue {
FONT-SIZE: 10pt
}
.text {
FONT-SIZE: 9pt
}

img.download {vertical-align:middle;}

HR.blue {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; COLOR: #cee0f2; HEIGHT: 1px; BACKGROUND-COLOR: #cee0f2; BORDER-RIGHT-WIDTH: 0px
}

/* ----------container zentriert das layout-------------- */
#container {
width: 800px;
padding:0px;
margin: 10px;
margin-left: auto;
margin-right: auto;
border:1px solid #564b47;
}

/* ----------banner for logo-------------- */
#banner {
text-align: left;
background-color: #ffffff;
padding: 0px;
margin: 0px; }

#banner img {padding:10px 0px;}


/* ----------outer und inner----------------- */

#outer{
border-left: solid 0px #ffffff; /* linke Menue Spalten Farbe */
border-right: solid 0px #ffffff; /* rechte Menue Spalten Farbe */
background-color: #ffffff; /* Farbe fuer Inhalt Spalten */
}

#inner{margin:0; width:100%; }

/* --------------left und right navigavtion------------- */
#left {
width:150px;
float:left;
position:relative;
margin-left:2px;
margin-right:0px;
border-right:1px solid #dce9f5;
border-top:1px solid #dce9f5;
padding: 0px;
}
#right {
width:160px;
float:right;
position:relative;
margin-right:2px;
margin-left:0px;
border-left:1px solid #dce9f5;
padding: 0px;
}

#rahmen {
width:100%;
position:relative;
margin-right:0px;
margin-left:0px;
border-left:1px solid #dce9f5;
padding: 0px;
}
/* ----------outer und inner----------------- */


/* -----------------Inhalt--------------------- */
#content{
position: relative;
margin-left:5px;
margin-right:5px;
float: left;
width:472px;
}
p {
padding: 5px 10px;
margin:0px; }

pre{
font-size: 12px;
padding: 5px 10px;
margin:0px;}

/* ----------------footer---------------------- */
#footer {
border-top:1px solid #dce9f5;
clear:left;
padding:0px;
margin:2px;
text-align: center; }

 

[Jürgen Auer]

Zwei Hinweise:

- Ist die Seite mit einer DTD definiert und gegen diese valide? Das kann bei CSS-Geschichten entscheidend sein.

- Das sieht nach einem Box-Problem aus. Beim IE rutscht etwas nach unten, wenn oben zu wenig Platz ist. Für den Platz ist wiederum der Rendermodus (Quirks / Standard) entscheidend, also die DTD und deren Einhaltung.

Zähle zusammen, wieviel Platz die Elemente in der Breite brauchen (plus margin/padding) - es kann aber auch sein, daß das im Augenblick im Quirks gerendert wird und korrekt wird, wenn die Seite im Standard-Modus ausgegeben wird.

 

[Urs]

mach mal den #content nur 450 px, wenn dann geht, kannst du die zahl erhöhen bis du beim wert bist der eben nicht mehr geht ....