1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Darstellungs Probleme mit FireFox.

Dieses Thema im Forum "CSS" wurde erstellt von PowerCheat, 22. Mai 2008.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. PowerCheat

    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:
    1. <!--content-->
    2. <div class="bigcontent">
    3. <div class="contentheader"></div>
    4. <div class="lagecontent">&nbsp;</div>
    5. <div class="contentspacer"></div>
    6. <div class="smallcontent">&nbsp;</div>
    7. <div class="contentspacer2"></div>
    8. </div>
    9. <!--content end-->
    CSS:
    HTML:
    1. .bigcontent {
    2. position:relative;
    3. margin-bottom:54px;
    4. width:866px;
    5. min-height:100%;
    6. height:auto !important;
    7. height: 100%;
    8. margin-left:17px;
    9. margin-right:17px;
    10. display:inline-block;
    11. background-image:url(images/bg_content.jpg);
    12. background-repeat:repeat-y;
    13. }
    14. .contentheader {
    15. background-image:url(images/bg_header_bottom.jpg);
    16. height:24px;
    17. width:866px;
    18. }
    19. .contentspacer {
    20. width:7px;
    21. height:374px;
    22. background-image:url(images/bg_trenner_middle.jpg);
    23.  
    24. float:left;
    25. }
    26. .contentspacer2 {
    27. width:10px;
    28. height:374px;
    29. background-image:url(images/bg_trenner_right.jpg);
    30. float:left;
    31. }
    32. .lagecontent {
    33. width:600px;
    34. background:#303030;
    35. background-image:url(images/bg_content_verlauf.jpg);
    36. background-repeat:repeat-x;
    37. min-height:375px;
    38. height:auto !important;
    39. height:375px;
    40. margin-bottom:54px;
    41. float:left;
    42. }
    43. .smallcontent {
    44. width:249px;
    45. background:#303030;
    46. background-image:url(images/bg_content_verlauf.jpg);
    47. background-repeat:repeat-x;
    48. min-height:375px;
    49. height:auto !important;
    50. height:375px;
    51. margin-bottom:54px;
    52. float:left;
    53. }
    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.
     
  2. Maik

    Maik Gast

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

    PowerCheat Erfahrenes Mitglied

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

    Maik Gast

  5. PowerCheat

    PowerCheat Erfahrenes Mitglied

  6. Maik

    Maik Gast

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

    Code (Text):
    1. <div class="bigcontent clearfix"> ... </div>
    denn schliesslich umschliesst diese Box die Floatumgebung, und nicht das DIV contentheader.
     
  7. PowerCheat

    PowerCheat Erfahrenes Mitglied

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

    Danke Maik!
     
Die Seite wird geladen...
Status des Themas:
Es sind keine weiteren Antworten möglich.