DIV-Bereiche werden fehlerhaft dagestellt.

    Hallo ich arbeite gerade an einer Site die komplett mit div-Bereichen formatiert wurde. Im Internetexplorer 6.0 sieht die Seite auch super aus, aber im Firefox 1.0.7. haut`s sie irgendwie auseinander. An machen Stellen ziehter er die Spalten ganz brutal auseinander und jedes mal, wenn ich den Browser öffne sind die Lücken an einer anderen Stelle.

    Kann mir das vielleicht irgendjemand erklähren und mir sagen, was ich dagegen tun kann. Ansonsten bleibt mir nämlich nichts anderes übrig, als die komplette Seite mit Tabellen nachzubauen.

    <a href="http://img506.imageshack.us/my.php?image=screenshot8gp.jpg" target="_blank"><img src="http://img506.imageshack.us/img506/116/screenshot8gp.th.jpg" border="0" alt="Free Image Hosting at http://www.ImageShack.us" /></a>

    MfG
    Julia

    2 Mal editiert, zuletzt von Julia (23. November 2005 um 15:05)

    Bischen klein der Screenshot. So sieht man ja nichts. Und ohne link und Quelltext kann ich dir nicht helfen. Am besten, du Probierst rum und versuchst ein konkretes Problem zu finden und die Seite solage zu zerstückeln bis nur noch das Problem besteht. Dann ist die Lösug entweder offensichtlich, oder du postest den betreffenden gekürzten Quelltext hier. (Beispiel: Das div wird, obwohl es den Stil float:left hat nicht Links vom Text angezeigt. Hier der betreffende Quelltext: [...]).

    Generell ist der Firefox sehr viel genauer bei der Umsetzung von CSS als der IE. Das heißt, der Firefox macht selbst weniger Fehler, verlangt von dir aber auch, dass du weniger Fehler machst.

    Lies auch das: http://www.firefox-browser.de/wiki/FAQ:Seitenanzeige

    Hab jetzt schon mal genau herausgefunden an welcher Stelle das Problem auftritt.
    Ich möchte den Fall noch mal etwas genauer schildern.
    Die Seite um die es geht ist mehrfach durch Div-Bereiche miteinander verschachtelt
    (-hab es nicht angelegt, arbeite jetzt damit). Bis zu einem bestimmten Mass wird
    die Seite im FiFo-Browser auch zufriedenstellend dagestellt. Es gibt auf dieser Seite
    jedoch einen Div-Bereich der sich insgesamt vertikal 72 mal wiederholen soll.
    In ihm liegt ein kleines Bild (links) und ein bischen Text (rechts). Sobald sich der
    Div-Bereich zum fünften oder sechsten mal wiederholt gibt es gravierende Dastellungsfehler,
    obwohl sich am Code grundsätzlich nichts ändert.

    Hoffe jemand kann mir helfen und ihr könnt was mir dem Codeausschnitt anfangen.
    Es sind alle Div-Bereich, die vorhanden sind und der Bereich der sich immer wiederholen
    soll ist mit Blinddaten gefüllt.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    #wrap{
    width:766px;
    margin-left:auto;
    margin-right:auto;
    }

    #content-01{
    display:table;
    background-image:url("../img_allgemein/bg_weiss_gruen.gif");
    background-repeat:repeat-y;
    width:100%;
    }

    #content-links{
    width:486px;
    float:left;
    }

    .zweispaltig{
    display:table;
    background-image:url("../img_allgemein/bg_trennlinie_01.gif");
    background-repeat:repeat-y;
    width:486px;
    }

    .padding-04{
    padding-top:7px;
    padding-right:0px;
    padding-bottom:7px;
    padding-left:0px;
    }

    .zweispaltig-spalte{
    padding:7px 25px 0px 30px;
    }

    .links{
    padding:7px 25px 0px 39px;
    width:179px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:179px;
    float: left;
    }

    .trennlinie{
    height:1px;
    overflow:hidden;
    display:block;
    }

    .t-11{
    background-color:#878787;
    width:193px;
    margin:0px 0px 16px -19px;
    }
    .rechts{
    padding:7px 25px 0px 30px;
    width:188px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:188px;
    float: right;
    }
    .t-03{
    background-color:#878787;
    width:183px;
    margin:0px 0px 16px 0px;
    }

    #content-rechts{
    float:right;
    padding:22px 20px 20px 30px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 230px;
    }

    .weiss{
    color:#ffffff;
    }

    .nach_oben {
    text-align: right;
    width: 180px;
    }

    <html>


    <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>xy</title>
    <link href="../css_js/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <a name="oben"></a>
    <div id="wrap"><!-- LibraryItem/Header -->
    <div id="content-01">
    <!--_____________________________________________________content-links_____________________________________________________-->
    <div id="content-links">

    <!--ANFANG -->
    <div class="zweispaltig padding-04">
    <div class="zweispaltig-spalte links"><div class="trennlinie t-11"></div>
    <img src="img/xxx.jpg" alt="" width="173" height="130" class="img-05">
    </div>
    <div class="zweispaltig-spalte rechts"><div class="trennlinie t-03"></div>
    <p><h3>fdgfdgfdgdfg<a name="zdf"></a></h3><br>
    fdgfdgdfgd <br>
    - fdgdgfgdf <br>
    - gdfgdfgf <br>
    - fgdgfgdgfm <br>
    - fgdgfgdg <br>
    - fdgfdg.
    </p>
    <a href="http://www.xxxxx.de" target="_blank" class="linkpfeil-01">
    gfdgfdgfdgdfg</a>
    <div class="nach_oben"><a href="#oben">
    <img src="../xxxxx/xxxxx.gif" width="9" height="6"></a>
    </div>
    </div>

    </div>
    <!--ENDE -->
    </div>
    <!--_____________________________________________________content-rechts _____________________________________________________-->
    <div id="content-rechts" class=" weiss"><!-- LibraryItem/Navigation -->
    </div>
    </div>


    <!-- LibraryItem/footer.lbi" -->
    </div>
    </body>
    </html>

    MfG
    Julia


    Ohne gross weiter zu lesen oder zu testen.... (gerade keine Zeit)

    Ich wette Du *leidest* am Boxmodel-Problem...:
    http://www.fabrice-pascal.de/artikel/ie5boxmodel/
    http://www.tantek.com/CSS/Examples/boxmodelhack.html
    http://www.howtocreate.co.uk/wrongWithIE/?chapter=Box+Model