✔ Problem mit IE und float (3px Bug)

[Biergamasda]

Hi Leute!

Hab wieder mal ein kleines Problem mitm 3px Bug im IE. Nur leider versteh ich den nicht so ganz, hab ihn zwar nach längerem hin und her ab und zu in den Griff bekommen, nur will das bei mir leider nicht funktionieren.

Mal ne Kurzfassung:

Ich hab ein div links floatend, eins rechts und in der Mitte ein weiteres. Meines Wissens muss man dem Mittleren teil nun 6px "mehr platz verschaffen", da links und rechts ein Bug mit jeweils 3 px auftritt (hoffe ich hab das richtig verstanden) Wenn ich das jedoch probiere, ändert sich nichts, wenn ich dann den mittleren Teil größenmäsig ändere, ergibt sich das Problem, dass mir lücken zwischen den Bereichen entstehen, hoffe mir kann da mal jemand helfen (wenn möglich mit ner kleinen Erklärung des Bugs )

Zur übersicht:

hier ein Preview

und noch teile vom code:

div#left
{
    float: left;
    width: 249px;
}

div#right
{
    float: right;
    width: 240px;
    height: 581px;
}

div#middle
{
    width: 511px;
    height: 581px;
    margin-left: 249px;
}

<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>

PS:
Hab schon mehrmals gesucht, und auch einige zutreffende Kapitel gefunden, jedoch noch nichts was ich "verstanden" bzw was mich wirklich weitergebracht hätte.

 

[Maik]

Probier mal Folgendes:

div#left
{
    float: left;
    width: 249px;
    margin-right: 0 !important; /* Für moderne Browser */
    margin-right: -3px; /* Für IE */
}

div#right
{
    float: right;
    width: 240px;
    height: 581px;
    margin-left: 0 !important; /* Für moderne Browser */
    margin-left: -3px; /* Für IE */
}

div#middle
{
    width: 511px;
    height: 581px;
    margin-left: 249px !important; /* Für moderne Browser */
    margin-left: 246px; /* Für IE */
}

 

[Biergamasda]

Bis aufs Important (wieso muss das bei modernen sein, oder wo kann ich was drüber nachlsen? ) hatte ich schon die gleiche Idee, doch funktioniert sie nicht.

habs nochmal hochgeladen (mit den von dir vorgeschlagenen Änderungen).
klick

btw - Eine Erklärung währ trotzdem recht nice

lg

 

[Maik]

Mit der !important-Regel werden die "normalen" Werte für die modernen Browsers (Firefox, Mozilla, Netscape, Opera) gesetzt, die der IE ignoriert. Anschliessend wird die CSS-Eigenschaft nochmal notiert, nur diesmal eben mit dem IE-spezifischen Wert.

Da der IE bei floatenden Boxen die margin-Werte verdoppelt, müssen diese für ihn halbiert werden. Dies geschieht ebenfalls mit der !important-Regel:

div#middle_mainbut1, div#middle_mainbut2, div#middle_mainbut3, div#middle_mainbut4, div#middle_mainbut5
            {
                float: left;
                margin: 0 5px 0 5px !important; /* Für moderne Browser */
                margin: 0 2.5px 0 2.5px; /* Für IE */
                width: 91px;
                height: 75px;
                background-image: url("./images/middleMainbut_na.jpg");

                text-align: center;
                line-height: 75px;
                vertical-align: middle;
            }

 

[Biergamasda]

Ok, das Funktioniert mal, tausend dank, sowohl für die Erklärung als auch für das Bsp

Nun hätt ich noch ne abschließende Frage.


In der Mitte steht ein content Bereich, Welcher einen header und footer besizt (die beiden blauen Balken). Komischerweise tritt im IE ein weiser Rand an den unteren Ecken der oberen teils auf, und beim unteren ein blauer Strich an der Unterseite. Währ toll wenn man mir da auch noch schnell helfen könnte *liebschau*

lg

 

[Maik]

Erweiter mal die CSS-Regel für die beiden IDs #middle_contentheader und #middle_contentfooter mit der overflow:hidden-Eigenschaft.

 

[Biergamasda]

Komisch...

Nja, hat funktioniert. Tausend dank

lg