Andreas: Darstellungsproblem bei FireFox

Hallo,

meine Seite (http://update.rucksack-center.de/shop/) wird im IExplorer sehr schön angezeigt. Jetzt habe ich jedoch zu Testzwecken die Seite mit FireFox auch einmal angeschaut und siehe da, der ganze Header und die Navi verschieben sich. Könnt ihr mir vielleicht helfen, wie ich den Fehler wegbekomme?

Danke schon mal!

Gruß,
Andreas

  1. meine Seite (http://update.rucksack-center.de/shop/) wird im IExplorer sehr schön angezeigt. Jetzt habe ich jedoch zu Testzwecken die Seite mit FireFox auch einmal angeschaut ...

    Das ist natürlich der falsche Weg, wenn ein Browser etwas falsch anzeigt, dann ist es der IE. Hast du dir die Seite mal mit Opera angeschaut?

    Das ganze ist eine ziemlich üble DIV Suppe, die nicht valide ist, z.b. direkt am Anfang der Block:
    <div id="header"><span id="head1"><a href="/" style="display: block; width: 240px; height: 99px; float: left;"></a></span><span id="head2"></span></div>
    Ich kann mir unmöglich vorstellen dass man sowas braucht.

    Bei dem Code wird es schwer dir zu helfen.

    Struppi.

    --
    Javascript ist toll (Perl auch!)
  2. Moin,

    meine Seite (http://update.rucksack-center.de/shop/) wird im IExplorer sehr schön angezeigt.

    kann ich nicht behaupten. Sowohl im IE als auch im Opera wird das Formular für deine Newsletter-Anmeldung zerrissen und "irgendwo" über den restlichen Inhalt gelegt (Screenshot im Opera 8.54, 157k PNG).

    Jetzt habe ich jedoch zu Testzwecken die Seite mit FireFox auch einmal angeschaut und siehe da, der ganze Header und die Navi verschieben sich.

    Das kann ich auch nicht nachvollziehen. Wenn ich die angegebene URL im Firefox aufrufe, zeigt er mir nur eine leere(!) Seite, obwohl die LiveHTTP-Extension zeigt, dass immerhin ein HTML-Dokument mit Status "200 OK" übertragen worden ist.

    Wieso verweist du übrigens im DOCTYPE, der eigentlich XHTML 1.0 angibt, auf die DTD für XHTML 1.1? Und das in Kombination mit einem Rest von Tabellenlayout, Divitis und gelegentlichen Darstellungsangaben im Quelltext?

    Eine Angabe zur Zeichencodierung fehlt auch - weder dein Server gibt eine an, noch dein Quellcode. Also gilt UTF-8 (Default bei XHTML), aber dein Dokument *ist* nicht in UTF-8 codiert.

    Der Validator hat außerdem noch ein paar andere Fehler zu melden.

    So long,
     Martin

    --
    Alkohl ist ungesund,
    Rauchen ist schädlich,
    Sex ist unanständig
    - und die Erde ist eine flache Scheibe.
  3. Hallo Andreas,

    meine Seite (http://update.rucksack-center.de/shop/) wird im IExplorer sehr schön angezeigt. Jetzt habe ich jedoch zu Testzwecken die Seite mit FireFox auch einmal angeschaut und siehe da, der ganze Header und die Navi verschieben sich. Könnt ihr mir vielleicht helfen, wie ich den Fehler wegbekomme?

    Die Darstellungsunterschiede rühren vermutlich auch daher, dass sich die Seite aufgrund eines HTML-Kommentars, den du noch vor der DOCTYPE-Deklaration eingefügt hast, nur im IE im Quirksmodus befindet, in den  anderen Browsern aber im Standards-Compliant-Mode.

    Willst du auch diese Browser dazu bringen es so verkehrt wie der IE darzustellen, könntest du mal versuchen, wie es aussieht, wenn du auch diese durch Weglassen der URL im DOCTYPE in den Murksmodus schickst. Das ist aber -mangels Standard- immer noch keine gute Ausgangsbasis für gleiche Darstellung in allen Browsern.

    Besser wäre es also umgekehrt, dass du diesen komischen HTML-Kommentar vor dem DOCTYPE entfernst, so dass sich alle Browser an ein und denselben Standard halten und du die Seite dann so umbaust, dass sie auch so aussieht wie du es dir wünschst.

    Gruß Gernot

  4. Hallo!

    (http://update.rucksack-center.de/shop/)

    Wie man Verweise einbindet :-)

    Zu deiner Aussage: Der M$IE stellt etwas *nie* richtig dar, wenn der Firefox oder Opera etwas falsch machen. Soll heißen: Die Seite erst richtig mit dem Firefox oder Opera erstellen und dann die Fehler des IE mit Conditional Comments ausbügeln.

    Zu deinem Problem: Erstelle deine Seite neu und überprüfe alles im Firefox. Wenn der alles richtig macht, dann schau deine Seite im IE an und erhole dich von dem Schock. Dann bindest du über Conditional Comments ein Stylesheet ein, das nur für den IE ist. Außerdem sorge dafür, dass dein Dokument valide ist.

    Außerdem solltest du die Elemente in deinem Quelltext sinnvoller wählen:

    <div id="outer"> <- das brauchst du nicht. Du kannst auch <body> formatieren

    <a name="top"></a> <- Ist das ein Anker? Brauchst du nicht! Ein dokumentinterner Verweis kann jede ID anspringen. Hört sich lustig bzw. pervers an, ist aber so ;-)

    <div id="header"><span id="head1"><a href="/" style="display: block; width: 240px; height: 99px; float: left;"></a></span><span id="head2"></span></div> <- soetwas ist total sinnlos. Verwende a) keine inline-Styles und b) nicht soviele <span>. Vorallem dann nicht, wenn sie keinen Inhalt haben. Außerdem solltest du deinen Quellcode sinnvoll einrücken, damit das ganze übersichtlich bleibt. Ausnahmslos jedes <div> mit der ID "headirgendwas" kann durch einen <hx>-Tag ersetzt werden.

    Die Tabelle, mit der du das Formular formatierst ist sinnlos. Du kannst auch Formularelemente formatieren.

      
    <p>&#187; <strong><a href="shop-section-28-eastpak.html" title="Eastpak">Eastpak</a></strong></p>  
      
    <p>&#187; <strong><a href="shop-section-103-dakine.html" title="Dakine">Dakine</a></strong></p>  
      
    <p>&#187; <strong><a href="shop-section-1761-timbuk2.html" title="Timbuk2">Timbuk2</a></strong></p>  
      
    <p>&#187; <strong><a href="shop-section-23-4you.html" title="4You">4You</a></strong></p>  
      
    <!-- usw... -->  
    
    

    Diesen Code kannst du wunderbar in eine Liste packen.

      
    <p>&nbsp;</p>  
    <p>&nbsp;</p>  
    
    

    Wofür brauchst du das? Um Abstände zu realisieren? Dann nimm margin und padding.

    Zum restlichen Code kann ich nur sagen, dass das ganze eine totale DIV-Suppe ist. Interessant ist für dich sicherlich http://css.fractatulum.net/sample/suppe/div_suppe1.htm

    Schreibe die Seite neu. Prüfe mit dem FF. Verbessere für den IE. Wenn es dann Probleme gibt, dann helfen wir dir gerne weiter.

    ciao, ww

    --
    Ein japanisch-deutsches Gedicht
    sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
  5. Hallo!

    Das meiste wurde von den Anderen schon gesagt. Zusätzlich würde ich anmerken, dann wenn man auf eine Software vertraut, die wahrscheinlich nur von einem guten Marketingmenschen verkauft wurde, aber ansonsten nur schrecklichen Quellcode ausliefert, man eben den Anbieter dieser "haftbar" machen sollte. Die Seiten des Anbieters sehen m.E. genauso schrecklich aus und weisen die selben Fehler auf. Frage dort an, die sollen, wenn Sie Software verkaufen, auch validen Code produzieren.

    Schönen Gruß

    Afra

  6. Moin

    wenn du der Quintessenz der Ratschläge hier folgst (Neuschreiben) solltest du gleich den Landgericht-Hamburg-Disclaimer-Unsinn aus dem Impressum entfernen.

    Gruß
    rfb

    --
    Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
    (Galileo Galilei)
  7. Mal eine andere Frage:
    Kann man in dem Shop schon was bestellen? Coole Rucksäcke!!!

    so long,
    Samy