✔ Blauer Balken im IE bei bestimmter Höhe

Status
Nicht offen für weitere Antworten.
Eiszwerg

Eiszwerg

Erfahrenes Mitglied
Hallo Community,

habe hier folgende CSS-Datei

Code: 
body
{
    background-color    : #006699;
    font-family         : arial;    
}

.wrap
{
    width               : 700px;
    height              : 600px;
    margin              : 0px;
    padding             : 0px;
}

.head
{
    width               : 700px;
    height              : 100px;
    background-image    : url(../gfx/head.gif);
}

.navi
{
    width               : 100px;
    height              : 400px;
    float               : left;
    margin              : 0px;
    padding             : 0px;
    background-color    : #cccc66;
}

.text
{
    width:              : 600px;
    height              : 400px;    
    padding             : 0px;    
    margin              : 0px;
    margin-left         : 100px;
    background-color    : #cccc66;
}

.bottom
{
    width               : 700px;
    height              : 100px;
    background-image    : url(../gfx/bottom.gif);
    text-align          : center;
}

und eine entsprechendes Grundgerüst:
HTML: 
<body>
  <div class="wrap">
    <div class="head">
    </div>
    <div class="navi">
    <a href="">lalalalala</a><br />
    <a href="">lalalalala</a><br />
    <a href="">lalalalala</a><br />
    </div>
    <div class="text">
    Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... 
    Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... 
    Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... 
    Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... Dies ist ein Text... 
    </div>
    <div class="bottom">
    <br />
    <a href="">Impressum & Kontakt</a>
    </div>
  </div>
</body>

Schaue ich mir die Seite im FF an, dann sind keine Übergänge zwischen .navi und .text. Im IE ist jedoch ein schmaler vertikaler blauer (Hintergrundfarbe) Balken zu sehen. Lasse ich die Höhe der beiden Divs im CSS-File weg, ist auch der Balken weg, aber der text rutscht unter die Navigation.
Wie kann ich das ändern?

Ich danke!
 
Hi,

erweitere das Stylesheet folgendermaßen, um den "3px-Bug" im IE zu beheben:

Code: 
.navi
{
    width               : 100px;
    height              : 400px;
    float               : left;
    margin              : 0px;
    margin-right        : 0 !important; /* Für moderne Browser */
    margin-right        : -3px; /* Für IE */
    padding             : 0px;
    background-color    : #cccc66;
}

.text
{
    width:              : 600px;
    height              : 400px;
    padding             : 0px;
    margin              : 0px;
    margin-left         : 100px !important; /* Für moderne Browser */
    margin-left         : 97px; /* Für IE */
    background-color    : #cccc66;
}
 
Das ist aber seltsam, denn bei mir führt es zum erwünschten Ergebnis, und du wärst der Erste, bei dem der bewährte Lösungsvorschlag nicht funktioniert.
 
:-(
Hab vergessen das
Code: 
 margin : 100px;
zu entfernen.
Du hast natürlich Recht. Es funktioniert.

Magst Du mit bitte auch erklären, was es mit dem Bug auf sich hat?

Danke Dir!
 
Der IE hat die schlechte Angewohnheit, bei floatenden Elementen, die eine Höhenangabe besitzen, eine 3px-Lücke zwischen sie zu setzen - eben bekannt als "3px-Bug" oder 3px-Gap".
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück