Problem mit display inline block

irgendwie komm ich grad aus mir unsichtbaren Gründen mit display:inline-block nicht zurecht :frowning:
normal hab ich damit keine Probleme, aber irgendwie seh ich diesmal meinen ehler nicht. Könnt ihr das hier mal anschauen:
clubfreeware.bplaced.net/gam.php?review=1

Da sollte das blaue und das rote oben bündig sein, doch irgendwie bring ichs nicht fertig. kann mir jemand weiterhelfen?

Vielen Dank
MFG

Deine Fehler zeigt dir der Validator: validator.w3.org/check?uri=http% … review%3D1

Und im CSS sind auch etliche drin, selbst wenn man das als CSS 3 validieren lässt und die Stellen, wo vendor-specific properties verwendet werden, mal ignoriert: jigsaw.w3.org/css-validator/vali … =1&lang=de

Von den syntaktischen Fehlern abgesehen ist der Code eine derart grässliche Suppe, dass es absolut keinen Spaß macht, überhaupt nachzuvollziehen, was darin für was zuständig sein soll, geschweige denn aktiv nach der Ursache von Darstellungsfehlern zu suchen.

nun was das ganze für eine Suppe ist bin ich mir bewusst xD Aber nur gerade für die beiden Container (rot und blau) - da sind vorläufig noch alle CSS Befehle direkt im Tag - also alles an einem Ort. Ich wäre euch dankbar, wenn ihr euch das mal anschauen könnt, per Auswahlquelltext ist das ja einfach und anders wärs auch bei schönem Code kein Spass.

Vielen Dank

Nun, Fehler beheben ist auf jeden Fall notwendig und Voraussetzung
für ein definiertes Verhalten.
Zudem, wenn du zuverlässige(re) Ergebnisse vom Validator haben
willst, solltest du einen doctype für HTML4.01 oder für XHTML1.x
angeben, dann wird anhand der DTD geprüft und nicht gegen
geheimnisvolle Regeln, die einer Interpretation eines sich täglich
ändernden Arbeitsentwurfes für HTML5 entsprechen ;o)

Generell - wenn der Rest keine Rolle spielt, kannst du die beiden
fraglichen Elemente ja einfach in ein ansonsten leeres
(X)HTML-Dokumentgerüst packen, die CSS-Anweisungen dazu
in ein style-Element im selben Dokument, dann findet man schneller
heraus, was sich warum wie auswirkt. Mit so einem Testdokument
kann man solche Probleme auch leichter diskutieren als anhand
eines chaotischen und fehlerhaften Dokumentes ;o)

Auch in einer leeren Textdatei reagiert das Ganze gleich…

<div style="height: 100px;"><div style="display: inline-block; width: 100px; height: 100px; background: none repeat scroll 0% 0% red; padding: 3px;"><img src="./gam/previews/nopreview.png" style="max-height: 100px; max-width: 100px; margin: auto;" alt="Vorschau für test" title="Vorschau für test"></div><div style="display: inline-block; width: 876px; background: none repeat scroll 0% 0% blue; padding: 3px; line-height: 100%; height: 100px; text-align: left;"><div style="height: 80px; background: none repeat scroll 0% 0% yellow;"><h3 style="margin: 0px 0px 5px;">test</h3> test</div> <img title="Deutsch" src="gam/images/flags/de.png">&nbsp;&nbsp;<img title="Französisch" src="gam/images/flags/fr.png">&nbsp;&nbsp;<img title="Niederländisch" src="gam/images/flags/nl.png">&nbsp;&nbsp;</div></div>

Setze mal vertical-align:top für den gelben Container, das scheint zu helfen.
Warum genau das in der Situation erforderlich ist, kann ich dir jetzt auch nicht sagen - aber wie gesagt, bei solch einem besch*ssenen HTML-Code kann man auch nicht mehr viele Ansprüche an Logik und Nachvollziebarkeit der Darstellung haben.

[quote=“chrisb”]Setze mal vertical-align:top für den gelben Container, das scheint zu helfen.
Warum genau das in der Situation erforderlich ist, kann ich dir jetzt auch nicht sagen - aber wie gesagt, bei solch einem besch*ssenen HTML-Code kann man auch nicht mehr viele Ansprüche an Logik und Nachvollziebarkeit der Darstellung haben.[/quote]

Okay, es hat ein paar Fehler und ist nicht ordentlich. Ansonsten ist der nicht so schlimm ^^ :neutral_face:
Aber ich werds mal versuchen.

Edit
Funzt nicht ^^
Doch wie würde denn genau das “logischerweise” aussehen? Dann hätten wir vielleicht anhaltspunkte.