Problem mit 3 div-Containern / IE

[Domzilla]

Hi Zusammen!

Ich habe ein kleines Problem mit 3 div-Containern und dem Internet Explorer:

Ich habe auf einer Seite 3 div-Container nebeneinander; Links "#avmenu", in der Mitte "#content" und Rechts "#extras" (siehe css-Code).
Wenn ich nun in "#avmenu" oder "#extras" Text einfüge, oder auch einfach nur leere Zeilenumbrüche mache verschiebt sich der inhalt von "#content" um die Anzahl der in "#avmenu" bzw. "#extras" gemachten Zeilenumbrüche nach unten. Es entsteht praktisch eine große Lücke in "#content". Dieses Phänomen tritt allerdings nur im IE auf, Firefox zeigt die Seite korrekt an.
Kann mir jemand sagen, woran das liegt?

mfg!

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #211d1e url(images/body_deg.gif) repeat-x
}


#wrap {
background: #000000;
color: #ffffff;
border:  none;
margin: 0 auto;
width: 790px;
}

#header {
clear: both;
margin: 0px 0em 0px 0em;
padding: 0;
height: 75px;
background-color: #000000;}

#header h3 {
width: 350px;
margin: 0px 0px 0px 15px;
float: left;
}

#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0px 0px 0px 0px;
font-size: 0.8em;
line-height: 1.2em;
height: 35px;}



#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {    
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}    

#avmenu li {
margin-bottom: 4px;
}

#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #fffff1;
display: block;
padding: 6px 0 0 10px;
background: #67522c;
border-left: 1px #846837 solid;
}
    
    
#avmenu li a:hover {
background: #67522c;
color: #fffff1;
border-left: 4px #47381e solid;
}

.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #a8a8a8;
background-color: #000000;
line-height: 1.3em;
}

#extras {
float: right;
width: 150px;
margin: 0 0 10px 0;
font-size: 0.9em;
line-height: 1.5em;
}

#extras p {
margin: 0 0 1.5em 0;
}

#content {
margin: 0em 160px 20px 160px;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#content img {
padding: 0px;
display:inline;
}



h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #b6952a;
}

a:hover {
text-decoration: underline;
color: #b6952a;
}


#footer {
clear: both;
margin: 0 auto;
padding: 0px 0em 0px 0em;
width: 790px;
text-align: center;
color: #808080;
font-size: 0.9em;
height: 244px;
background: #211d1e url(images/pom_bas.jpg) no-repeat right;
border: none;}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 0px 7px 0px 5px;
float: left;
}

.right {
margin: 0px 7px 0px 5px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}

 

[koslowski]

Hi,

ohne den Quelltext dazu ist das schlecht zu sagen.

Kann also nur sagen was mir an der CSS auffiel:

#avmenu  {
    clear:left;
    float:left;
     }

clear vor float, das kapiere ich nicht.

line-height immer ohne Masseinheit angeben, sonst kann es Vererbungsprobleme geben: nicht line-height:1.2em; sondern line-height:1.2;
Dann ist es einfach ein Faktor, völlig ausreichend.

Ich würde eher allen drei Containern eine feste Breite geben und alle drei links floaten lassen.

In deinem Fall hat z.B. #content kein Layout für den IE, das kann zu Problemen bei der Darstellung im IE führen.
Layout bekommst du z.B. durch die Angabe einer Breite oder einer Höhe (reicht bei Höhe schon height:1%;) ), allerdings nicht durch width/height:auto; da muss schon ein Wert genannt werden..

 

[Domzilla]

Vielen Dank!
An dem fehlenden Layout von #content hat es gelegen! :idea:

Jetzt klappt alles!