Darstellungsprobleme bei 2-Spalten-Design mit dem Firefox

[Marsl89]

Hallo zusammen,

auf meiner Internetseite hat sich leider ein Darstellungsfehler eingeschlichen. Allerdings tritt dieser nur bei dem Mozilla Firefox auf. Bei dem Opera wird alles korrekt angezeigt.
Das komische an dem Darstellungsfehler ist, dass dieser nicht immer auftritt. Wenn man die Seite aktualisiert, wird dann die Seite meistens korrekt angezeigt.
Umso mehr Inhalt auf der Seite ist, desto häufiger wird die Seite falsch dargestellt.

die Webseite

Screenshots von dem Darstellungsfehler:
Screen 1
Screen 2


Die rechte Spalte des 2-Spalten-Designs rutscht unter die linke Spalte..

Leider habe ich überhaupt keine Ahnung, an was es liegen könnte. Die CSS-Datei und HTML-Files sind valide..
(abgesehen von den fehlenden alt="" bei <img> auf paar Seiten, das muss ich noch korrigieren. Aber das ist leider nicht die Ursache des Problems)

Ich wäre euch sehr dankbar, wenn ihr mir helfen könntet!

 

[neuroleptika]

Du verwendest display: table-cell; für die Spaltenaufteilung.
Es gibt jedoch keine Zeilen (display: table-row) und keine Tabelle (display: table).
Die Browser fügen die fehlenden Element als anonyme Boxen hinzu um eine Tabellenstruktur nachzubilden.
Im Firefox funktioniert das nicht immer reibungslos.
- Manchmal wird table-row zu früh eingefügt

Für alle IEs verwendest du Floats, das würde auch in den anderen Browsern gut funktionieren.

Edit:
Die anonymen Boxen kannst du weder im Queltext noch im Firebug sehen. Sie lassen sich auch nicht per css ansprechen.
Wenn du css-Tabellen verwenden möchtest, solltest du die Struktur bewusst aufbauen.
Beispiel:

<div class="display: table">
<div class="display: table-row">

<div class="display: table-cell">zelle-1</div>
<div class="display: table-cell">zelle-2</div>

</div>
</div>

Bei mir ff2 und ff3 (unter Windows) machte sich der Fehler allerdings nicht bemerkbar.

 

[threadi]

Hinweis 1: du hast ein Zeichensatzproblem im header, könnte auch zu Problemen beim Rendering führen wenn Umlaute im Code stehen. Siehe:
[Invalid] Markup Validation of http://marci.vtcg.de/tennis/beitrag.php - W3C Markup Validator

Hinweis 2: "display: table;"-Eigenschaften werden vom IE nicht unterstützt. Dass du hierfür mittels Conditional Comments extra Inhalt für den IE einfügst könnte für Suchmaschinen von Nachteil sein UND bläht den Quellcode der Seite auf. Je mehr Inhalt du hast umso mehr muss jeder Browser laden, aber jeder Browser braucht zur Darstellung nur einen Teil des Quellcodes, da ja vieles mit Conditional Comments auskommentiert ist bzw. per CSS ausgeblendet wird ... eine Herausforderung für jeden Browser imho.