✔ Auch ein Problem mit der DIV-Höhe.

[Markus_Hain]

Sorry das ich den alten Thread wieder ausgrabe aber hab noch eine Frage.

Mein damaliges Projekt wurde kurz nach meinem letzten Post auf Eis gelegt mangels Zeit.
Jetzt wollte ich wieder daran weiterarbeiten, dabei bemerkte ich, dass das Layout zwar unter
IE7 wunderbar läuft, aber unter IE6 (blendet plötzlich abstände von ca. 2px
zwischen "b_b_left", "b_b_middle" und "b_b_right" ein und kürzt den footer in der Breite auf
die breite des Textes) sowie bei Opera (Footer läuft nicht mit wenn eine der Navileisten größer
wird) "falsch" angezeigt/interprätiert wird.

Bei Bedarf kann ich auch noch Screenshots der Fehler online stellen.

Hoffe mir kann nochmal einer helfen

Hiernochmal ein Link zur momentan aktuellsten Version:
http://www.familie-hain.de/test.html


Gruß Markus

 

[Maik]

Hi,

im IE6 tritt der "3px-Gap-Bug" in Erscheinung, der sich auf die folgende Weise beheben lässt:

                #banner_bottom_left {
                        background-color: #FF00FF;
                        height: 20px;
                        float:left;
                        width: 160px;
                        margin-right:0 !important;
                        margin-right:-3px;
                }
                #banner_bottom_right {
                        background-color: #FF00FF;
                        height: 20px;
                        float:right;
                        width: 160px;
                        margin-left:0 !important;
                        margin-left:-3px;
                }
                #banner_bottom_middle {
                        background-color: #999999;
                        height: 20px;
                        margin: 0 160px !important;
                        margin:0 157px;
                }

Dass er den Footer nur auf die Textlänge verbreitert, liegt daran, dass er die angewandte Kombination der left- und right-Positionierung nicht unterstützt.

Damit im Opera (und den übrigen modernen Browsern) der Footer auch bei längerem Inhalt am unteren Elementrand ausgerichtet wird, muss die Floatumgebung "gecleart" werden:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<div id="box" class="clearfix"> ... </div>