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

fyrefoqs

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.

JonHa

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.

fyrefoqs

Danke, hervorragend,

manchmal sieht man vor lauter Bäume den Wald nicht, oder so...

Heisst das, dass die ältere Version von Firefox diesen Hack ebenfalls nicht interprätiert?

JonHa

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...

fyrefoqs

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

bugcatcher

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.

fyrefoqs

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

bugcatcher

Ich komm glücklichweise immer ganz ohne hacks aus. hab ich ein glück. ich verwende primär die "nested box"-Variante. Die ist wenigstens sicher.

fyrefoqs

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

Cyberman

Für den IE eignen sich IMO die conditional comments recht gut - das versteht nur IE.
Z.B:

Code

<!--[if lt IE 7]>
  bla bla pseudo-HTML
<![endif]-->

Auf diese Weise wird´s beim IE7 auch wieder unwirksam, der dann hoffentlich HTML/CSS kann...

fyrefoqs

Ist aber eine relativ einfache Übergangslösung, ähnlich den Bot-Codes (?)