✔ Probleme mit Firefox und IE

[Jule_123]

Hallo,

ich habe ein kleines Problem und zwar funktioniert meine Seite im IE einwandfrei nur im Firefox nicht.

Zurzeit sieht es so aus:


<div id="wrapper" class="clearfix">
<div id="header">


<div id="menue">
<ul id="hauptmenue"></div>
<div id="balken_rot"></div>
<div id="fliesstext"> </div>
</div>

<style>

html,body {
height:100%;
}

#wrapper {
position:relative;
min-height:100%;
height:auto;
height:100%;
background: url(image/balken_rot.png) repeat-y;
}

#header {
height:124px;
background:#fff;
}

#balken_rot{
width:48px;
float:left;
}

#fliesstext{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
float:left;
width:316px;
display:inline;
line-height:20pt;
top:150px;
margin-left:108px;
white-space:nowrap;
display:inline;

}

.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 */
</style>


Mein Problem ist dieser rote Balken. Er befindet sich links neben dem Fliesstext. Er soll erst dann enden wenn der Fleisstext endet. Das hab ich soweit auch hinbekommen nur der Firefox kommt damit leider nicht klar. Der Balken endet vorzeitig. Nur ich weiß nicht woran es liegt. Ich hoffe jemand von euch kann mir helfen. lg Jule

 

[Maik]

Hi,

vermutlich liegt es an der fehlenden !important-Regel in der ersten height-Deklaration des DIVs #wrapper, dass Firefox und die übrigen modernen Browser das Element in der Höhe nicht weiter mitwachsen lassen, denn mit dieser Angabe sollen sie die zweite height-Deklaration ignorieren, die für den IE (<7) gedacht ist, da er die min-height-Eigenschaft nicht unterstützt, aber die height-Eigenschaft als "Mindesthöhe" ansieht. Die übrigen Browser behandeln die height-Eigenschaft aber als fixe Höhe.

Und in meinem Beispiel, das ich dir vergangene Woche erstellt habe, lautete die CSS-Regel:

#wrapper {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
background: url(image/balken_rot.png) repeat-y;
}

 

[Jule_123]

Sorry das important hatte ich als Hinweis von dir gesehen ich wusste nicht das es stehen bleiben soll. Das war wohl ein Missverständnis und es funktioniert auch vielen Dank. Jedoch bleibt noch ein weißer Rand. Unten ist es sehr störend. Wie bekomme ich den denn weg? lg Jule

 

[Maik]

Wo bleibt ein weißer Rand? Etwa zwischen dem Browserfensterrand und dem DIV #wrapper?

html,body {
height:100%;
margin:0;
padding:0;
}

Oder unterhalb des DIVs #wrapper?

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

Sorry das important hatte ich als Hinweis von dir gesehen ich wusste nicht das es stehen bleiben soll.

Wenn ich einen Hinweis beifügen möchte, dann in einem Kommentar:

#wrapper {
position:relative;
min-height:100%;
height:auto !important; /* Achtung: die !important-Regel weist die modernen Browser an, die nachfolgende height-Angabe zu ignorieren */
height:100%;
background: url(image/balken_rot.png) repeat-y;
}

 

[Jule_123]

Jepp genau das meinte ich vielen herzlichen Dank

lg Jule

 

[Maik]

Wo bleibt ein weißer Rand? Etwa zwischen dem Browserfensterrand und dem DIV #wrapper?

Oder unterhalb des DIVs #wrapper?

Jepp genau das meinte ich vielen herzlichen Dank

Jetzt bin ich genauso schlau, wie vorher :suspekt: