CSS-Bugs in Firefox

  • Hallo,

    ich möchte meine Homepage von der Formatierung mit Tabellen auf CSS umstellen. Allerdings sind die ersten Schritte mit CSS extrem nervig. :(

    Im folgenden Beispielcode soll ein blauer Balken mit einem Menue dargestellt werden. Im IE 6.0 funktioniert eigentlich alles problemlos und CSS verhält sich so wie ich das gerne hätte. Der Firefox (0.9.1) stellt aber vieles (meiner Meinung nach) total falsch dar.

    Die Zeile h1 {font-family: ar....... habe ich nur drinn, weil sonst das Menue im FF gar nicht dargestellt wird. Je nach positionierung der Elemente in der CSS-Datei wird der eine oder andere Punkt nicht richtig formatiert. Wenn der Block body {... ganz nach unten verschoben wird geht es wieder.

    Im IE funktioniert der Code richtig. Der Text in der Menüzeile ist mittig.
    Im FF ist die Darstellung falsch. Der Text in der Menüzeile hängt unten am Rand.

    Ist mein CSS Code falsch oder der FF total verbuggt?

    MfG Wolf

    -------------------------
    test.html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="test.css" title="test stylesheet" />
    </head>

    <body>
    <img src="logo.gif" alt="Logo" width="250" height="40">
    <div id="topmenue">
    <p>Startseite | Forum | Bilder </p>
    </div>

    <div id="varb">Variante B</div>
    <div id="varc">Variante C</div>

    Test Test
    </body>
    </html>

    -------------------------
    test.css:

    body {
    font-family:Arial,Verdana;
    background-color:white;}
    color:black;}

    h1 {font-family: arial, tahoma, sans-serif;}

    #topmenue {
    margin-top:10px;
    margin-bottom:20px;
    background-color:Navy;
    color:white;
    font-weight:bold;
    height:30px;
    width: auto;
    vertical-align: middle;
    padding: 5pt;
    text-align:center;}

    #varb {
    position:absolute;
    top:250px; left:200px;
    color:lime;}

    #varc {
    position:absolute;
    top:150px; left:300px;
    color:red;}
    -------------------------

  • Zitat von WerWolf


    body {
    font-family:Arial,Verdana;
    background-color:white;}
    color:black;}


    So schonmal garnicht. ; )

    Zitat von WerWolf

    Der Firefox (0.9.1) stellt aber vieles (meiner Meinung nach) total falsch dar.


    Ich liebe sie. Die leute die die bedeutung der css/html-elemente nicht wirklich kennen... : )

    Er verhält sich vielleicht nicht so wie du willst, aber wie es das W3C vorsieht. Und das ist für mich die einzigste Instanz die über richtig oder falsch entscheiden darf. ; )

    Erstens. Das Boxmodel vom IE ist falsch. Wenn du sagst, ein element solle 30px hoch sein und auf allen seiten 5px padding, dann ist das element beim ie genau 30px hoch. es wird auch höher und breitet sich damit aus, wenn der inhalt höher ist, als der angegebene inhalt.

    Beides ist nach Standard falsch. Wenn ein element eine feste grösse zugewiesen wurde, darf es sich nicht weiter ausbreiten. und wenn man eine höhe von 30px und ein padding von 5px angibt ist die gesammthöhe 40px und nicht 30px wie bei ie.

    Beides macht Firefox richtig.

    Warum das ganze verrückt aussieht, ist auch leicht zu erklären. der inhalt (der <p>-absatz) erzeugt einen overflow über die grenzen des nest-objekts (<div>-box). das kann man vermeiden mit overflow:hidden;

    Mag sein, dass der IE das anzeigt, was du dir wünschst, mag vielleicht sogar sein, dass der IE das ganze "sinnvoller" darstellt (was an sich wiederum geschmackssache ist), aber nach W3C-Standard RICHTIG ist das was Firefox macht.

    Fazit: Dein CSS Code ist das was Firefox anzeigt. Wenn dir das nicht gefällt, musst du was anders schreiben. Total verbuggt ist eigendlich nur der IE. Ist auch kein bashing, ist ein fakt. Wer sich die Richtlinien des W3Cs mal durchgelesen hat, wird zum selben schluss kommen.

    Man könnte jetzt noch kontern: IE hat 95% (fallent *g*) Marktanteil und ist dasmit der Standard, aber da alle alternativen Browser sich an den W3C-Standard halten, bzw. versuchen ihn so gut wie möglich zu implementieren (gibt keinen browser der das perfekt kann), sollte man sich damit mal auseinandersetzen. Mozilla, Opera, Safarie (Mac), Netscape6+ und Konqueror(LinuxKDE) (um mal ein paar Beispiele zu nennen) sind allesammt Standard-orientiert. Nur MS mit ihrem IE wollen wieder selber Pseudostandards erschaffen und machen es damit den seitenbastlern das leben schwer. ; )

  • body {
    font-family:Arial,Verdana;
    background-color:white;}
    color:black;}

    udn du beschwerst dich das der FX es falsch anzeigt? Eine Klammer wäre hier angebracht. 2 nicht.

    Betrachtet man sich jetzt mal den TopMenu Teil. Ich sehe margin, aber das stört uns nicht. Ich sehe eine height von 30px. Und eine padding von 5pt.
    Wenn man jetzt mal bedenkt das der Firefox das anzeigt was du willst und der IE es falsch macht könnte man sagen, dass deine 30px höhe schnell weg sind wenn du auf jeder seite noch 5pt padding hast. (Warum der IE so scheisse ist kann man http://www.fabrice-pascal.de/artikel/ie5boxmodel/ hier nachlesen - bzw. du es fixen kannst)

    nebenbei... google mal nach "einrücken" den Quelltext so zu schreiben ist xtrem schlecht.

    hier ist also der code damit es korrekt ist. das der IE es falsch anzeigt liegt nicht am Code sonderm am IE.

    Wenn du dich vertraut machst mit dem Link den ich gepostet habe, dann kannst du es auch hinbekommen das Browser es richtig anzeigen und der IE sogar per Zufall das darstellt was man will (IE ist kein Browser... ich meine, keiner würde nen Bobbicar als Auto bezeichnen...)

    Wenn du es net hinbekommst mim Boxmodel hack die dort aufgelistet sind, meld dich nochmal, ich watche den Thread. aber pro´biers erstmal selbst...

  • Hab mir mal dein Quellcode angeschaut und verbessert:

    So sollte es auch im Firefox richtig dargestellt werden.

    Schau dir doch mal die Seite http://validator.w3.org an; da kannst du deine HTML-Seiten auf Fehler überprüfen lassen. Und unter http://jigsaw.w3.org/css-validator/ kannst du deine CSS-Dateien prüfen lassen.

  • Hallo alle zusammen,

    vielen Dank für eure sehr ausführlichen Antworten! :)
    Jetzt läuft es unter beiden Browsern.

    Mit dem zusätzlichen } im Body hab ich mich ja gründlich blamiert.
    Ich verwende zum surfen den FF. Den IE muß ich leider berücksichtigen, da die meisten meiner Homepagebesucher außer M$ nichts anderes kennen.

    Ich muß wohl noch einiges nachlesen. Für einen Anfänger ist das aber leider sehr kompliziert. Mit Tabellen ging es leichter.

    MfG Wolf

  • Zitat von WerWolf

    ... Den IE muß ich leider berücksichtigen, da die meisten meiner Homepagebesucher außer M$ nichts anderes kennen .....

    einfach sauber coden, dann klappst auch mit dem nachbarn... 8)