✔ Darstellungs Probleme mit FireFox.

[PowerCheat]

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:

<!--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:

.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.

 

[Maik]

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.

 

[PowerCheat]

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....

 

[Maik]

Wenn der IE soweit alles richtig anzeigt, sprichst du wohl eher vom Hintergrund(bild) des Elternelements .bigcontent.

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

 

[PowerCheat]

hmm, stimmt.

aber leider bringt selbst der "Clear" fix hack nichts.

Habe mal die Seite hoch geladen, damit du nicht denkst das es schon die gesamte seite ist.


http://www.deindealer.de/2rad/css_layout.html

 

[Maik]

Die "clearfix"-Technik bringt sehr wohl was, wenn die Klasse clearfix im Parent-DIV bigcontent aufgerufen wird:

<div class="bigcontent clearfix"> ... </div>

denn schliesslich umschliesst diese Box die Floatumgebung, und nicht das DIV contentheader.

 

[PowerCheat]

omg, sorry war mein fehler hatte es in die flasche box eingearbeitet.

Danke Maik!