Darstellungsfehler, Abstände bei <p>+<h>Formatie

    Hallo,

    Seit der Versionen von Firefox 1.0.1 werden verschiedene Seiten verzerrt, beispielsweise schwer betroffen sind Anfänge von Absätze - diese werden eingerückt dargestellt und auch nicht mit dem eigentlichen Absatz-Abstand.

    Besonders betroffen sind Seiten wie http://www.iqlon.com/webkatalog/webmaster/foren/ - HTML und CSS sind validiert.

    Schade eigentlich, ich schätze Firefox gerade wegen der Konformen Darstellung, was im Webdesign eben neue Möglichkeiten eröffnet.

    Würde mich interessieren ob CSS-Formatierungsfehler öfters auftauchen bei den neueren Versionen, in der Entwicklung benutze ich neben anderen Browsern hautsächlich Firefox 0.10.1, bei dieser Version sind mir (bei meinen Codes) noch keine nennenswerte Artefakte aufgefallen.

    wenn du den absätzen sagst, das sie eingerückt werden sollen, dann werden Sie das auch.

    http://www.iqlon.com/css_js_grfx/iqlon.css zeile 85

    Code
    .Content>p+p {text-indent:30px;}

    Und wenn du sagt, das es keinen Abstand geben soll, dann gibt es auch keinen:
    Selbe Datei, eine Zeile drüber.

    Code
    .Content>p {margin:0px;}

    Dier IE überliest die beiden Zeilen, weil er diese konstruktion mit dem > und dem + nicht versteht.

    Der Firefox macht also alles richtig.

    Das ist kein Hack, sondern ganz normales gültiges CSS.

    Ich glaube, der Firefox konnte diese Syntax schon seit Version 0.1 :wink:

    Ich versteh auch grad nicht, worauf du hinaus willst...

    Ganz einfach, mit der Version 0.10.1 sieht die Seite so aus, wie jetzt mit den auskommentierten Zeilen um 85. :wink:

    Wir nutzten solche

    Code
    width: 940px;
\width: 950px;
w\idth: 940px;

    solche

    Zitat

    voice-family: "\"}\"";
    voice-family:inherit;

    und solche

    Zitat

    body>adcol {width:160px;}

    als "workarounds" für Browserschwächen, und teilweise wurden sie auch "IE-Hacks", "Opera-Hacks" oder "friendly to Opera" etc genannt - im englischen Sprachraum sind auch Begriffe wie "CSS-Hacks" und "Box-Model-Hacks" üblich. :wink:

    Danke für die schnelle Antwort nochmals :)

    Und ich plan mal wieder nicht das Problem... wo passen die Abstände nicht?

    Die genannte Seite sieht unter FX1.0.2, FX0.10 und Opera8 komplett identisch aus.

    Zumal + und > von beiden auch (FX & Opera) interpretiert werden. Nur IE "überliesst" das, weil er es nicht versteht. Ist also kein Opera-Hack sondern vielmehr ein IE-Hack. Wenn das ganze wie auf IE aussehen soll, muss man die werte die dort benutzt werden anpassen.

    Ausserdem sind Hacks eh bäh. Sollte IE mit Version 7 plötzlich + und > verstehen (ok... zugegeben... unwahrscheinlich, aber nicht unmöglich), dann geht das ganze den bach runter.

    Schuldigung, ich hätte bescheid sagen sollen :)

    Habe das Stylesheet bereits kurz nach der ersten Antwort von Jonathan überarbeitet - es waren Fehler aus Nachlässigkeit, ich benutze für eine Gruppe von Sites technisch recht ähnliche Styles mit jedoch unterschiedlichen Formatierungen.

    Auf der genannten Seite wollte ich aber keine Pdeudoklassen verwenden, im Stylesheet sind allerdings die überflüssigen Angaben der anderen Seite verblieben, und der Firefox 0.10.1 den ich in meiner Produktionsumgebung verwende zeigte dies nicht (!) an.

    Nach dreissig Stunden Updates, Kundendienst usw hätte ich vor der Veröffentlichung dieses Problems erst eine Runde schlafen sollen - jetzt sind die Dinge klarer...

    Falls Interesse besteht, lade ich gerne noch einmal eine Datei zusammen mit den irrtümlichen CSS hoch zwecks Examinierung.

    Opera-Hack und Boxmodel-Hack: http://www.albin.net/CSS/beMeanToOpera.html

    @ bugcatcher

    Zitat

    Zumal + und > von beiden auch (FX & Opera) interpretiert werden. Nur IE "überliesst" das, weil er es nicht versteht. Ist also kein Opera-Hack sondern vielmehr ein IE-Hack. Wenn das ganze wie auf IE aussehen soll, muss man die werte die dort benutzt werden anpassen.

    Stimmt doch, wir haben es ja anderweitig als IE-Hack eingesetzt...

    Zitat

    Ausserdem sind Hacks eh bäh. Sollte IE mit Version 7 plötzlich + und > verstehen (ok... zugegeben... unwahrscheinlich, aber nicht unmöglich), dann geht das ganze den bach runter.

    Stimme Dir zu, mit der Ungewissheit müssen wir leider leben, oder einen anderen Job suchen - mir gefällt aber mein Job :wink:

    Danke für die freundliche Aufmerksamkeit, FP :)

    Zitat

    4. Hack: "Eine Empfehlung"

    Meine betreffende Webseite wollte ich diesmal eben ohne hacks umsetzen, habe aber von einem verschachteltem Boxmodel ebenfalls abgesehen aus Gründen der Simplicität, ich wollte mit dieser Webseite einen puritanischen Weg nach SEO gehen, mal wieder Mut zur Einfachheit genommen.

    Ich habe die verschachtelte Variante natürlich auch eingesetzt, halt mit etwas overhead - man weiss ja nie... und nach einigen Sites mit dem boxmodel-hack, die allesamt nicht ganz zufriedenstellend gerieten im Bezug auf Kundenwünsche/Crossbrowser etc, wollte ich eben weg vom "codebustin'".

    Aber schön, dass wir jetzt langsam semantisches Design durchsetzen :)