hausmeister: Browser-Unterschiede bei der DIV Interpretation

Hallo zusammen,

ich habe zum ersten Mal ein Layout hauptsächlich aus Layern entwickelt, welche in einer externen Stylesheet größtenteils definiert werden.

Das Problem liegt in der unterschiedlichen Browserinterpretation von CSS Größen / Angaben.

IE gibt sich Mühe und stellt die Seite sehr gut dar und bessert scheinbar  Unstimmigkeiten (Margin, Padding, Align ...) automatisch nach. Mozilla hingegen verzeiht keinen logischen Fehler genauso wie Netscape. Opera hat Probleme bei den Rändern die richtigen Größen einzuhalten. (z.B. 300px - 4px Rand = width: 296 px;) Damit die Seite in Opera stimmt haut Sie aber wieder in allen andern Browsern nicht hin, ein ewiger Quark.

Ein Problem jedoch ist sehr merkwürdig: Laut Rechnung habe ich auf der linken Tabellenspalte 3 Divs zu 200px, 300px und 500px. Die nur in der Höhe definiert sind und sich die restlichen Freiheiten aus den Begrenzungen der Tabelle zusammensuchen. In der rechten Spalte ist dann nur 1 Layer mit der Summe aus den drei Ebenen der linken Spalte also: 1000px.

IE und Opera stellen dieses Layout mit gleichem Abschluss am Fuße dar. Netscape und Mozilla nicht. Letztere scheinen auch die Pixelmaßeinheit größer auszuschießen, da die Seite im allgemeinen Länger angezeigt wird als mit den anderen Browsern.

Hat jemand ähnliche Erfahrungen gemacht und weis eine Lösung für dieses Problem? Weiter unten ist ein Link zu meinem Bastelobjekt. :)

Mit freundlichen Grüßen Hausmeister

Anhang: http://www.der-coole-pool.de/badewannen/paa-baths/andante/andante_n.html

  1. Hi,

    IE gibt sich Mühe und stellt die Seite sehr gut dar

    nein, du hast die Seiten für den IE optimiert.

    und bessert scheinbar  Unstimmigkeiten (Margin, Padding, Align ...) automatisch nach.

    Künstliche Intelligenz in einem Browser? Der erkennt wieviele Pixel der Designer seinen Rahmen vom Rand weghaben wollte?

    Mozilla hingegen verzeiht keinen logischen Fehler genauso wie Netscape.

    und? Dafür gibt's doch Standards.

    In der Schule verzeiht einem der Lehrer auch keinen logischen Fehler, das wird knallhart angestrichen.

    Opera hat Probleme bei den Rändern die richtigen Größen einzuhalten.

    Opera ist mir zwar suspekt, hält sich aber normalerweise an Standards.

    (z.B. 300px - 4px Rand = width: 296 px;)

    Such mal nach "Box-Model", bei Bedarf mit -Bug dahinter

    Hat jemand ähnliche Erfahrungen gemacht und weis eine Lösung für dieses Problem? Weiter unten ist ein Link zu meinem Bastelobjekt. :)
    Anhang: http://www.der-coole-pool.de/badewannen/paa-baths/andante/andante_n.html

    Wo ist da ein Link?

    E7

  2. hi,

    ich habe zum ersten Mal ein Layout hauptsächlich aus Layern entwickelt, welche in einer externen Stylesheet größtenteils definiert werden.

    wenn das div-suppe bedeutet, ist es immer noch murks.

    Das Problem liegt in der unterschiedlichen Browserinterpretation von CSS Größen / Angaben.

    IE gibt sich Mühe und stellt die Seite sehr gut dar und bessert scheinbar  Unstimmigkeiten (Margin, Padding, Align ...) automatisch nach.

    der IE korrigiert unnötigerweise zahlreiche fehler, und stellt damit auch groben unfug oft noch so dar, wie vom unerfahrenen seitenbastler gewünscht.

    Mozilla hingegen verzeiht keinen logischen Fehler genauso wie Netscape.

    deshalb solltest du auch primär einen mozilla oder firefox zum entwickeln nutzen; fehler des IE werden anschließend nachgebessert.

    Opera hat Probleme bei den Rändern die richtigen Größen einzuhalten. (z.B. 300px - 4px Rand = width: 296 px;)

    liegt da ein opera-problem vor - oder ein verständnisproblem deinerseits bzgl. des box models?

    Ein Problem jedoch ist sehr merkwürdig: Laut Rechnung habe ich auf der linken Tabellenspalte 3 Divs zu 200px, 300px und 500px.

    was'n nu für 'ne tabelle?
    ich dachte, du wolltest ein modernes CSS-layout erstellen?

    Anhang: http://www.der-coole-pool.de/badewannen/paa-baths/andante/andante_n.html

    </faq/#Q-19>

    du solltest dich zunächst mal ums HTML kümmern - da sind nämlich noch zahlreiche fehler drin (am häufigsten die mehrfachnutzung von IDs).

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
  3. Salaam!

    ich habe zum ersten Mal ein Layout hauptsächlich aus Layern entwickelt, welche in einer externen Stylesheet größtenteils definiert werden.

    Du verwendest <div>, also schreibe bitte besser auch divs statt Layer (letzteres ist mißverständlich, weil es auch <layer> gibt).

    IE gibt sich Mühe und stellt die Seite sehr gut dar und bessert scheinbar  Unstimmigkeiten (Margin, Padding, Align ...) automatisch nach. Mozilla hingegen verzeiht keinen logischen Fehler genauso wie Netscape. Opera hat Probleme bei den Rändern die richtigen Größen einzuhalten. (z.B. 300px - 4px Rand = width: 296 px;) Damit die Seite in Opera stimmt haut Sie aber wieder in allen andern Browsern nicht hin, ein ewiger Quark.

    Nein, Opera hat recht (und die Geckos werden ihm auch zustimmen ;-) ). Richtig muß Dein Beispiel heißen: 300px + 4px Rand ergibt eine Breite von 304px).
    Der IE bessert übrigens nicht nach, sondern rechnet einfach anders als die anderen (also falsch). Es sieht nur bei Dir besser aus, weil Du bei Deinen Angaben die Formel des IE-Box-Model-Bugs verwendet hast anstatt der richtigen.

    Ein Problem jedoch ist sehr merkwürdig: Laut Rechnung habe ich auf der linken Tabellenspalte 3 Divs zu 200px, 300px und 500px. Die nur in der Höhe definiert sind und sich die restlichen Freiheiten aus den Begrenzungen der Tabelle zusammensuchen. In der rechten Spalte ist dann nur 1 Layer mit der Summe aus den drei Ebenen der linken Spalte also: 1000px.

    Deine divs stecken in Tabellen und diese wiederum in anderen divs. Warum? Wenn Du schon ein Tabellenlayout verwendest (wovon ich abrate), dann definiere lieber Deine Tabellenzellen so, daß Du immer eine logische Einheit in einer Zelle hast, und drücke nicht noch divs rein.

    Ich bin sogar geneigt zu sagen, daß Du Tabellen und divs genau falschrum verwendest: Dein ganzer Inhalt ist in einer Riesentabelle - hier wäre ein div-Layout _viel_ besser. Aber die Details und die Preise sind doch eindeutig tabellarische Daten, warum verwendest Du dafür keine Tabellen?

    Viele Grüße vom Længlich