✔ IE float bug

[Xym]

Hi!

Habe auf einer Seite ein 3 Spalten Layout erstellt. Links, Mitte und Rechts.
Jedes ist in einem Div Container und hat ein Float nach Links. Doch wie üblich funktioniert es nur im IE nicht. Links und Mitte stehen richtig oder die Rechtespalte rutscht unter die Linke.

Hier ist der Qullcode:

 <div id="content">
               <div id="left">
                    
                    <div id="navi">
                        <h3> Men&uuml; </h3>
                        <ul>
                          ....................                            
                        </ul>
                    </div>
               </div>
               
               <div id="text">                
                    ........................
               </div>
               
               <div id="right">
                    <div id="newsletter">
                    ..............................                     
                    </div>
               </div>
            </div>
            
            <div id="footer"> ........................... </div>
            
        </div>

#main {
    width: 940px;
    margin: 10px auto 0 auto;
    background-image: url(../images/bg.png);
    border: 2px solid #aaa;
    box-shadow: 0px 0px 5px 3px #888888;
}

/* HEADER
  ==================================================================== */
header {
    width: 940px;
    height: 220px;
    margin: 0px;
    padding: 0px;
    background: #ffffff url(../images/header.png);
}

/* CONTENT
  ==================================================================== */
#content {
    width: 940px;
    background-color: #00f;
}

#content div {
    float:left;
}

/* LEFT
  ==================================================================== */
#left {
    width: 180px;
    height: 100%;    
    /*background-image: url(../images/left_background.png);*/
}

/* NAVI
  ==================================================================== */
#navi {
   width: 170px;
   border: 1px solid #444;
   margin-top: 35px;
   margin-left: 5px;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
}

#navi h3 {
    background-color: #333;
    color: #FFF;
    margin: 0;
    text-align: center;
}

#navi ul {
    margin: 10px 0 0 0;
    padding: 0;
    list-style: square;
    padding-left: 20px;
    color: #ff9000;
}

#navi ul li {
    width: 160px;
    font-size: 18px;  
}


/* TEXT
  ==================================================================== */
#text {
    width: 580px;
    margin-top: 15px;
    font-size: 18px;
    line-height: 28px;
}

#text p {
    padding-left: 10px;
    padding-right: 10px;
}

#text h2 {
    text-align: center;
    font-family: sans-serif;
    text-decoration: underline;
}

#text h3 {
    font-size: 19px;
}

#text form {
    margin-left: 150px;
}

#text form input:hover {
    cursor: pointer;
}

.left {
    float: left;
}

.right {
    float: right;
}

/* RIGHT
  ==================================================================== */
#right {
    width: 180px;
    height: 100%;
    /*background-image: url(../images/right_background.png);*/
}

/* NEWSLETTER
  ==================================================================== */
#newsletter {   
   margin-top: 35px;
   text-align: center;
   margin-right: 5px;
   margin-left: 5px;
   border: 1px solid #444;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
}

#newsletter h3 {
    font-size: 18px;
    margin: 0;
    background-color: #333;
    color: #FFF;
}

/* FOOTER
  ==================================================================== */
#footer {
    width: 940px;
    height: 45px;
    background: #888 url(../images/footer_background.png);
    clear: both;
}

#footer p {
    padding-top: 10px;
    padding-left: 300px;
    color: #fff;
}

Die unwichtige Sachen, wie den Text auf der Seite oder das styling des Menüs habe ich mal weggelassen.

Wie kann ich das Problem nun lösen?

 

[SpiceLab]

Wichtig: Bei CSS-Problemen mit dem IE bitte die Version angeben!

Zudem korrespondieren deine beiden vergebenen ID- und Klassen-Namen (left / right) nicht im HTML- und CSS-Code, sodass deren float-Regeln browserübergreifend keine Anwendung finden!

 

[Xym]

Die Klassen left und right waren für Bilder gedacht.

Das Problem tritt bei beim IE 9-5.5 auf, also bei allen die Testen kann.

Wichtig wäre es, dass es bei 9-7 läuft. Denn ich glaube, dass keiner mehr 6 verwendet, oder?

 

[SpiceLab]

Möglicherweise sollte diese Regel

#content div {
    float:left;
}

spezifiziert werden, damit sie nicht weiterhin für die <div>-Nachfolgerelemente der drei Spaltenblöcke (left, text, right) gilt.

Andere Frage: in welchem Darstellungsmodus befindet sich denn IE9?

Gut möglich, dass er sich im "Quirks Mode" befindet, und sich somit wie IE6 aus alten Zeiten verhält - bekannt geworden unter The IE6 Three Pixel Text-Jog, der nicht genügend Platz für den letzten Spaltenblock übrig lässt, und zum Umbruch selbigen führt.

Siehe hierzu auch den Webmaster FAQ-Artikel Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?.

 

[Xym]

Hab jetzt jedem die Klasse "left" vergeben und den div text und right um 3px nach links verschoben wie es bei dem Floatbug beschrieben wurde, aber es geht leider nicht.

 

[SpiceLab]

Seltsam... ich kann mit deinem Codesnippet den Bug im IE überhaupt nicht reproduzieren.

 

[Xym]

Ok ich hab das Problem nun.

Die Breite der Links in dem Menü waren zu groß und haben den div Container verschoben.

Danke schön!