Darstellungs Probleme mit FireFox.

Status
Nicht offen für weitere Antworten.

PowerCheat

Erfahrenes Mitglied
Hallo ich bereite gerade ein Design auf, das früher in Table erstellt wurde.

Nun soll es aber in Xhtml und CSS umgesetzt werden.

Problem dabei ist, das nicht beide Spalten gleich Groß sich verlängern wenn dort viel Information hinein gelegt werden.

HTML:
HTML:
<!--content-->
<div class="bigcontent">
<div class="contentheader"></div>
<div class="lagecontent">&nbsp;</div>
<div class="contentspacer"></div>
<div class="smallcontent">&nbsp;</div>
<div class="contentspacer2"></div>
</div>
<!--content end-->

CSS:
HTML:
.bigcontent {
position:relative;
margin-bottom:54px;
width:866px;
min-height:100%;
height:auto !important;
height: 100%;
margin-left:17px;
margin-right:17px;
display:inline-block;
background-image:url(images/bg_content.jpg);
background-repeat:repeat-y;
}
.contentheader {
background-image:url(images/bg_header_bottom.jpg);
height:24px;
width:866px;
}
.contentspacer {
width:7px;
height:374px;
background-image:url(images/bg_trenner_middle.jpg);

float:left;
}
.contentspacer2 {
width:10px;
height:374px;
background-image:url(images/bg_trenner_right.jpg);
float:left;
}
.lagecontent {
width:600px;
background:#303030;
background-image:url(images/bg_content_verlauf.jpg);
background-repeat:repeat-x;
min-height:375px;
height:auto !important;
height:375px;
margin-bottom:54px;
float:left;
}
.smallcontent {
width:249px;
background:#303030;
background-image:url(images/bg_content_verlauf.jpg);
background-repeat:repeat-x;
min-height:375px;
height:auto !important;
height:375px;
margin-bottom:54px;
float:left;
}

hoffe Ihr könnt mir so helfen, wenn ich die Fertige Datei mal hochladen soll, bitte kurz hier schreiben. Werde dann die kompletten Daten hochladen.
 
Hi,

das Darstellungsproblem besteht aber nicht nur im Firefox, sondern in allen Browsern.

Bei dem Layout mit fixer Breite und den verwendeten Hintergrundbildern für die einzelnen Spalten hilft dir die vorgestellte Technik in dem Artikel A List Apart: Articles: Faux Columns weiter.

Weitere Links zu alternativen Techniken für solch sog. "Equal-Height-Columns" findest du in dem Artikel AnyColumnLongest.
 
Hmm, schade. Ich komme damit nicht klar.

Eigentlich habe ich sonst nur probs mit dem IE, nun ist es der FF...

im IE 6 wird das Design richtig angezeigt....
 
Die "clearfix"-Technik bringt sehr wohl was, wenn die Klasse clearfix im Parent-DIV bigcontent aufgerufen wird:

Code:
<div class="bigcontent clearfix"> ... </div>
denn schliesslich umschliesst diese Box die Floatumgebung, und nicht das DIV contentheader.
 
Status
Nicht offen für weitere Antworten.
Zurück