Darstellung in verschiedenen Browsern

[Michael Schröpl]

Liebe Forum-Leser,

ich bewege mich gerade auf ziemlich dünnem Eis, nämlich im Reich von CSS,
wo ich mich nicht sonderlich gut auskenne.
Außerdem habe ich das CSS-Kapitel von SelfHTML8 bisher eher nur überflogen
bzw. als Syntax-Nachschlagewert genutzt ...

Fangen wir also mal mit zwei URLs an:
   http://www.schroepl.net/pbm/partien/yield/_1906_f/militaer.htm
   http://www.schroepl.net/pbm/partien/yield/militaer.css

Die Seite ist valides XHTML 1.0 Transitional (könnte sein, daß ich sie
auch Strict kriege, darum kümmere ich mich dann später - bisher traue ich
meinen CSS-Kenntnissen einfach nicht und den Browsern ebenso wenig), und
auch der CSS-Validator fand keine Fehler (aber ein paar Warnings:
   http://jigsaw.w3.org/css-validator/validator?uri=http://www.schroepl.net/pbm/partien/yield/_1906_f/militaer.htm
die ich nur teilweise verstehe, siehe unten).

Was ich versuchen möchte, ist, die Darstellung der entsprechenden Tabelle
schön abstrakt und damit im HTML-Quelltext gut editierbar zu machen.
Den muß ich nämlich per Hand so tippen, und das als Ergebnis einer ziem-
lich komplexen Auswertung, die ich im Kopf vornehme (bzw. auf einer Art
"Schmierzetteldatei" und per Maus-Verschiebungen auf der dort abgebilde-
ten - im Original vektoriellen - Karte, welche den Inhalt der Tabelle
teilweise visualisiert).

Leider ist die Anzeige der Tabelle nicht überall so, wie ich sie gerne
hätte.

Die wesentlichen CSS-Definitionen meines Problemkreises:
tr.orders    td { font-weight:bold; padding-left:25px;
                  text-indent:-18px; margin-left:-18px; }
p               { white-space:nowrap; font-family:monospace;
                  font-size:9pt; margin-top:0px; margin-bottom:0px; }
p.okay          { color:#0000FF; text-decoration:none;      }
p.failed        { color:#9900CC; text-decoration:underline; }
span.retreat    { color:#FF0000; text-decoration:none;      }

Die Verteilung der CSS-Attribute auf <td> und <p> ist im Moment willkür-
lich - wenn ich diese kompakter zusammenfassen kann, möchte ich es tun.

Was will ich damit erreichen?
1. Ich möchte bestimmte "Klassen" von Inhalten innerhalb meiner Tabellen
   verwenden. Ich nutze dazu <p class="okay"> und <p class="failed">.
   Jede dieser Klassen hat eine eigene Farbe; "failed" ist zudem auch
   unterstrichen (so wird es auf Papier gedruckt und in Schwarz-Weiß
   fotokopiert, als Druckvorlage für eine Zeitschrift).
Das ist der Haupt-Grund meiner aktuellen Experimente: Ich will die <u>
und <br>   loswerden, die ich bisher massiv brauche und die im
Quelltext einfach potthäßlich sind, während die Klassennamen die Semantik
dessen beschreiben, was gerade passiert ist.

2. Beide Klassen sollen umgebrochene Folgeabschnitte (eingeleitet mit
   <br />) um 2 Zeichen einrücken, weil das 1. Zeichen der 1. Zeile
   (A/F) eine Sonderbedeutung hat. Die Spalten müssen aber eine limitierte
   Maximal-Breite haben, sonst kriege ich die Tabelle nicht ohne massives
   seitliches Scrolling hin; für die Art des Umbruchs existiert eine
   klare Konvention.
Gäbe es eine Möglichkeit, nach diesem 1. Zeichen eine Art "Tabulator-
Position" zu setzen, dann würde ich dies ggf. tun wollen, weil ich dann
auf monospace verzichten könnte; allein dafür aber beispielsweise eine
Subtabelle für die Formatierung zu nehmen, halte ich für Overkill, so
schlimm sind die monospace-Zeichen nun auch nicht.

Bis hierhin funktioniert auch alles noch ganz prima.

3. Innerhalb der <p class="failed"> kann es vorkommen, daß ich eine Zusatz-
   angabe brauche. Diese will ich dann in einer dritten Farbe haben und
   - das ist wichtig - nicht unterstrichen. Dazu füge ich in das
       <p class="failed">...[*]</p>
   an der [*]_position ein
       <span class="retreat">...</span>
   ein.
   Die Farbe (rot) klappt tadellos - aber das Unterstreichen läßt sich
   nicht zurücknehmen, der eingefügte Text bleibt unterstrichen.
   Der Effekt ist in allen neuesten Browsern der großen Drei identisch.
   Lustigerweise sieht es aber ausgerechnet im M$IE 5.0 so aus, wie ich
   es haben will! (Wieso auch immer.)
   Gibt es eine Möglichkeit, den gewünschten Effekt mit CSS für die 6er-
   Browser zu erreichen? Das ist im Moment mein größtes Problem - denn
   die Unterstreichung ist _semantisch_ falsch im Sinne meiner Auswer-
   tung, damit kann ich nicht leben. (Es gibt nämlich leider noch einen
   vierten, bisher nicht erwähnten Fall: Auch das "retreat" selbst kann
   "failen", und _dann_ würde es unterstrichen werden müssen.)

4. Mozilla macht als zusätzlichen Schnörkel oberhalb meines ersten <p>
   innerhalb einer Tabellenzeile eine Zeile Abstand; M$IE und Opera 6
   tun das nicht. Ich will es auch nicht. (Wie) kann ich das abstellen?

5. Ich würde gerne verhindern, daß der Inhalt eines <p>-Elements umge-
   brochen werden kann. Schlimmstenfalls soll lieber seitlich gescrollt
   werden, weil der umgebrochene Inhalt wegen Kürzelsprache völlig un-
   lesbar werden würde.
   Das wiederum machen die 6er-Browser alle richtig, aber der M$IE 5.0
   beispielsweise bricht um, wie er es gerade lustig findet.
   Laut SelfHTML 8 (das noch meint, nur Netscape 6 würde das unterstützen)
   werde ich damit wohl leben müssen, okay.

6. Was genau ist der Sinn der entsprechenden CSS-Warnings?
       (http://jigsaw.w3.org/css-validator/validator?uri=http://www.schroepl.net/pbm/partien/yield/_1906_f/militaer.htm)
   Ich möchte in vielen Fällen einfach keine Hintergrundfarbe definieren
   - warum sollte ich? (Die Warnings will ich natürlich weg haben, aber
   die Optik meiner Seiten dafür auch nicht verändern.)
   Und warum werde ich für jede einzelne Über-Definition gewarnt?
   Ich habe in der zentralen CSS-Datei meiner Site Defaultwerte gesetzt,
   die ich nur in einigen wenigen Spezialfällen überschreiben will, und
   dort dann möglichst so, daß ich wenig Code brauche, also beispielsweise
   keine <span>, sondern vor allem Tags in bestimmten Kontexten, etwa wie
   in
       tr.pseudonym th { white-space:nowrap; padding-left:5px;
                         color:#000000; font-size:9pt; }
   was mir viel HTML-Quelltext spart.

7. Netscape 4 bricht bei den beschriebenen Elementen ziemlich auseinander.
   Ich kann damit leben, daß es mit dem Communicator einfach nicht mehr
   funktioniert; sollte jemand Vorschläge haben, was ich verbessern könnte,
   um es ihm irgendwie wenigstens ein bißchen leichter zu machen, höre ich
   mir diese gerne an. Aber CSS sollte es eigentlich schon sein.

In der Hoffnung auf gute Tips
   Michael Schröpl

P.S.: Vielleicht eignet sich meine Problemstellung sogar dafür, gleich
      ein XML-Dokument zu verwenden (die Inhalte dürften sich prima als
      DTD beschreiben lassen, wenn ich davon auch nur einen Schimmer einer
      Ahnung hätte); Ideen in diese Richtung würden mich für die Zukunft
      auch interessieren, aber in nächster Zeit werde ich dazu wohl noch
      nicht kommen, u. a. weil die Browser-Unterstützung dafür vermutlich
      noch nicht reif ist. (Oder?)

[Sven Rautenberg]

Moin!

Uff, soooo viel Text. Und vermutlich nicht gerade einfach. Egal, ich arbeite mich mal durch... :)

3. Innerhalb der <p class="failed"> kann es vorkommen, daß ich eine Zusatz-
      angabe brauche. Diese will ich dann in einer dritten Farbe haben und
      - das ist wichtig - nicht unterstrichen. Dazu füge ich in das
          <p class="failed">...[*]</p>
      an der [*]_position ein
          <span class="retreat">...</span>
      ein.
      Die Farbe (rot) klappt tadellos - aber das Unterstreichen läßt sich
      nicht zurücknehmen, der eingefügte Text bleibt unterstrichen.

Ich vermute mal, das ist das kaskadierende der Stylesheets. Denn es passiert folgendes:
Der Browser hat Text in einer Tabellenzelle der Klasse 'orders'. Also werden diese Formatierungen für den Text genommen. Dann ist es ein P der Klasse 'failed' (lila Schrift, unterstrichen) - wird hinzugefügt. Und ein einzelnes Wort ist mit SPAN der Klasse 'retreat' ausgezeichnet. Da soll die Schrift rot, und ein Unterstreichen ist nicht notwendig. Also bleibt die unterstrichene Farbe vom P. :)

Kann auch sein, daß das ein Browser-Bug ist.

Ich würd mal folgende Zeile im CSS versuchen:
p.failed span.retreat    { color:#FF0000; text-decoration:none;}

Das formatiert den span in Abhängigkeit vom P, nicht frei. Könnte helfen. Wenn nicht, ist es vermutlich ein Bug oder eine andersartige Interpretation der CSS-Standards.

4. Mozilla macht als zusätzlichen Schnörkel oberhalb meines ersten <p>
      innerhalb einer Tabellenzeile eine Zeile Abstand; M$IE und Opera 6
      tun das nicht. Ich will es auch nicht. (Wie) kann ich das abstellen?

Kein P nehmen (das Tag hat unterschiedliche Default-Formatierungen), sondern DIV (das keine Formatierungen hat).

6. Was genau ist der Sinn der entsprechenden CSS-Warnings?
          (http://jigsaw.w3.org/css-validator/validator?uri=http://www.schroepl.net/pbm/partien/yield/_1906_f/militaer.htm)
      Ich möchte in vielen Fällen einfach keine Hintergrundfarbe definieren
      - warum sollte ich? (Die Warnings will ich natürlich weg haben, aber
      die Optik meiner Seiten dafür auch nicht verändern.)

Definiere background:transparent. Ist identisch mit "nix definieren", funktioniert aber sogar mit Netscape 4 (welcher mit "background:inherit" so seine Probleme hat. Bei mir war das Resultat kein "geerbter" Hintergrund, sondern ein grüner!).

Und warum werde ich für jede einzelne Über-Definition gewarnt?

Neue Vordergrundfarbe kann bei unpassender Hintergrundfarbe unsichtbar werden - so wie die Friesische Nationalflagge: Weißer Adler auf Weißem Grund. Die Warnung kommt deshalb bei jeder Definition, bei der du vergessen haben könntest, was für eine Hintergrundfarbe gerade aktiv ist. Mit der Transparent-Definition gibst du zumindest an, daß du weißt, was du tust, und die Warnung entfällt.

7. Netscape 4 bricht bei den beschriebenen Elementen ziemlich auseinander.
      Ich kann damit leben, daß es mit dem Communicator einfach nicht mehr
      funktioniert; sollte jemand Vorschläge haben, was ich verbessern könnte,
      um es ihm irgendwie wenigstens ein bißchen leichter zu machen, höre ich
      mir diese gerne an. Aber CSS sollte es eigentlich schon sein.

Tja, dazu sollte es erstmal in anderen Browsern funktionieren. :) Ansonsten ist NS4 wirklich nix, wenn man CSS ausreizen will.

- Sven Rautenberg

PS (darf ich ja auch, wenn du durftest): Vermutlich ist dein Problem so komplex (zumindest komplex beschrieben), daß du erstmal einen Schritt zurückgehen solltest (mental), und eventuell nochmal einen neuen Ansatz wagen. :)

[Michael Schröpl]

Hi Sven,

Egal, ich arbeite mich mal durch... :)

Danke schön!

Die Farbe (rot) klappt tadellos - aber das Unterstreichen läßt sich
   nicht zurücknehmen, der eingefügte Text bleibt unterstrichen.
Ich vermute mal, das ist das kaskadierende der Stylesheets.
Denn es passiert folgendes:
Der Browser hat Text in einer Tabellenzelle der Klasse 'orders'.
Also werden diese Formatierungen für den Text genommen.
Dann ist es ein P der Klasse 'failed' (lila Schrift, unterstrichen)

• wird hinzugefügt. Und ein einzelnes Wort ist mit SPAN der Klasse
  'retreat' ausgezeichnet. Da soll die Schrift rot, und ein Unterstreichen
  ist nicht notwendig. Also bleibt die unterstrichene Farbe vom P. :)
  Kann auch sein, daß das ein Browser-Bug ist.

Wenn es nach Deiner Beschreibung funktionieren würde, dann würde ich das
als bug ansehen - denn meine "text-decoration" würde ja einfach ignoriert.

Was mich mißtrauisch macht, ist, daß es _alle_ 6er Browser nicht so
machen, wie ich will - und ausgerechnet der M$IE 5.0 schon!
Das klingt für mich so, als sei es richtig, die Unterstreichung zu zeigen

• ich möchte nur gerne wissen, wieso ... und was ich tun müßte, um sie
  loszuwerden ...

Ich würd mal folgende Zeile im CSS versuchen:
p.failed span.retreat    { color:#FF0000; text-decoration:none;}
Das formatiert den span in Abhängigkeit vom P, nicht frei.

Tja, das hilft leider auch nicht.

Andererseits habe ich gerade mal Amaya 5.3 versucht - der soll ja angeblich
CSS können ... und der kriegt die Unterstreichung weg!

Könnte helfen. Wenn nicht, ist es vermutlich ein Bug oder eine
andersartige Interpretation der CSS-Standards.

Eben letztere versuche ich in diesem Thread zu erfragen.

4. Mozilla macht als zusätzlichen Schnörkel oberhalb meines ersten <p>
      innerhalb einer Tabellenzeile eine Zeile Abstand; M$IE und Opera 6
      tun das nicht. Ich will es auch nicht. (Wie) kann ich das abstellen?
   Kein P nehmen (das Tag hat unterschiedliche Default-Formatierungen), sondern DIV (das keine Formatierungen hat).

Könnte ich, ja. (Mache ich ungern, würde ich zur Not aber in Erwägung ziehen.)

Ich formuliere meine Frage um:
Welche Default-Formatierungen müßte ich bei <p> setzen, damit es so aussieht,
wie ich will? An einem "margin-top" kann es ja nicht liegen, sonst wäre der
Abstands zwischen je zwei <p> zu groß. Er ist aber nur vor dem ersten <p>
vorhanden, und auch nur bei Mozilla. Es riecht wohl doch nach einem Bug ...

Ich möchte im Moment vor allem verstehen, was geht und was nicht.
Ich brauche nicht sofort eine Lösung; ich möchte lieber ein Verfahren
definieren, das ich dann auf eine ganze Familie dieser Dokumente anwenden
will. Das eine genannte ist quasi der Testflieger für die ganze Gruppe.

Definiere background:transparent. Ist identisch mit "nix definieren",
funktioniert aber sogar mit Netscape 4 (welcher mit "background:inherit"
so seine Probleme hat. Bei mir war das Resultat kein "geerbter"
Hintergrund, sondern ein grüner!).

Yep, habe ich gemacht, der größte Teil der Warnings ist jetzt weg.

Leider macht das die /ms.css ca. 20% größer, und das ist die mit großem
Abstand am häufigsten angesprochene Datei der gesamten Domain, weil sie
für diese eben die CSS-Defaultwerte setzen soll ... die wird in praktisch
jedem Dokument referenziert.

Und warum werde ich für jede einzelne Über-Definition gewarnt?
Neue Vordergrundfarbe kann bei unpassender Hintergrundfarbe unsichtbar
werden - so wie die Friesische Nationalflagge: Weißer Adler auf Weißem
Grund. Die Warnung kommt deshalb bei jeder Definition, bei der du
vergessen haben könntest, was für eine Hintergrundfarbe gerade aktiv
ist. Mit der Transparent-Definition gibst du zumindest an, daß du weißt,
was du tust, und die Warnung entfällt.

body hat bei mir eine Default-Hintergrundfarbe - das scheint ihm nicht
zu reichen ...

PS (darf ich ja auch, wenn du durftest):

Aber klar doch!

Vermutlich ist dein Problem so komplex (zumindest komplex beschrieben),
daß du erstmal einen Schritt zurückgehen solltest (mental), und
eventuell nochmal einen neuen Ansatz wagen. :)

Eigentlich wollte ich "nur" ein Dokument vernünftig mit CSS formatieren,
und das auch nur mit den allerneuesten Browsern ... ist das denn schon
zuviel verlangt? Darf man CSS immer noch nicht verwenden?

Viele Grüße
      Michael

[Michael Schröpl]

Hi Sven,

4. Mozilla macht als zusätzlichen Schnörkel oberhalb meines ersten <p>
      innerhalb einer Tabellenzeile eine Zeile Abstand; M$IE und Opera 6
      tun das nicht. Ich will es auch nicht. (Wie) kann ich das abstellen?
   Kein P nehmen (das Tag hat unterschiedliche Default-Formatierungen),
   sondern DIV (das keine Formatierungen hat).

Ich habe gerade alle <p> durch <div> ersetzt und meine CSS-Definitionen
entsprechend angepaßt - keine Änderung. Immer noch eine zusätzliche Zeile
Zeile Abstand in Mozilla gegenüber Opera und M$IE.

Das war's also wohl eher nicht ...

Viele Grüße
      Michael

[Thomas J.S.]

hallo Michael,

ich bewege mich gerade auf ziemlich dünnem Eis, nämlich im Reich von CSS,

vor allem mit deinen sehr weitreichenden formatierungswünschen. ;-)

Was will ich damit erreichen?

1. Ich will die <u> und <br>   loswerden,

wirst aber letzlich nicht wirklich können.

2. Beide Klassen sollen umgebrochene Folgeabschnitte (eingeleitet mit <br />) um 2 Zeichen einrücken, weil das 1. Zeichen der 1. Zeile

(A/F) eine Sonderbedeutung hat.

was ist (A/F) ?

Gäbe es eine Möglichkeit, nach diesem 1. Zeichen eine Art "Tabulator-Position" zu setzen,

nein. was du machen könntest ist:

br:after { content:"  "; }

das fügt dir die zwei zeichen ein, aber es ging bei mir nur mit NS6.1. (IE5.5. kann es nicht)

3. Innerhalb der <p class="failed"> kann es vorkommen, daß ich eine Zusatz  angabe brauche. Diese will ich dann in einer dritten Farbe haben und - das ist wichtig - nicht unterstrichen.
      Gibt es eine Möglichkeit, den gewünschten Effekt mit CSS für die 6er- Browser zu erreichen?

span.retreat, p.failed:first-child    { color:#FF0000; text-decoration:none;     }

p.failed:first-child würde schon für NS6.1 reichen, aber der NS 4.x. braucht span.retreat nachwievor und den IE 5.5 kümmert weder das eine noch das anderen. Opera 6 und IE 6 habe ich nicht.

Das ist im Moment mein größtes Problem - denn die Unterstreichung ist _semantisch_ falsch im Sinne meiner Auswertung, damit kann ich nicht leben. (Es gibt nämlich leider noch einen  vierten, bisher nicht erwähnten Fall: Auch das "retreat" selbst kann "failen", und _dann_ würde es unterstrichen werden müssen.)

damit wird mein vorschlag mit "p.failed:first-child" ausser gefächt gesetzt, es sei denn du führst eine andere klasse für p bei solchen fällen ein.

4. Mozilla macht

meinst du hier NS6.x oder richtig mozilla?

Ich will es auch nicht. (Wie) kann ich das abstellen?

wie sven es sagte: könntest <div> nehemen.

5. Ich würde gerne verhindern, daß der Inhalt eines <p>-Elements umgebrochen werden kann. Schlimmstenfalls soll lieber seitlich gescrollt werden, weil der umgebrochene Inhalt wegen Kürzelsprache völlig un lesbar werden würde.
      Das wiederum machen die 6er-Browser alle richtig, aber der M$IE 5.0  beispielsweise bricht um, wie er es gerade lustig findet.
      werde ich damit wohl leben müssen, okay.

mehr als was du schon getan hast gibt es dazu nicht zu tun/sagen.
es sei denn  im <td> (was dann nicht mehr strict xhtml sein kann)

Ich möchte in vielen Fällen einfach keine Hintergrundfarbe definieren  - warum sollte ich? (Die Warnings will ich natürlich weg haben, aber  die Optik meiner Seiten dafür auch nicht verändern.)
   Und warum werde ich für jede einzelne Über-Definition gewarnt?

hat schon Sven erklärt.

7. Netscape 4 bricht bei den beschriebenen Elementen ziemlich auseinander.

das sit wegen deine angaben zu tr td mit paddings und margins.

Aber CSS sollte es eigentlich schon sein.

umgekehrt, ein css fähiger browser solle es schon sein.

P.S.: Vielleicht eignet sich meine Problemstellung sogar dafür, gleich ein XML-Dokument zu verwenden (die Inhalte dürften sich prima als DTD beschreiben lassen, wenn ich davon auch nur einen Schimmer einer Ahnung hätte); Ideen in diese Richtung würden mich für die Zukunft auch interessieren, aber in nächster Zeit werde ich dazu wohl noch nicht kommen, u. a. weil die Browser-Unterstützung dafür vermutlich noch nicht reif ist. (Oder?)

es ist egal ob du es jetzt in HTML oder in XML schreibst (gut mit XML könntest du die regel und struktur besser erfassen) da du dein xml datei auch darstellen musste und das geht nun mal im web über html, also bist du wieder am ausgangspunkt.
seit IE5 und NS6 kannst du es direkt mit xml+css versuchen, aber dss die darstellung dadurch besser wird, dürfen wir alle bezweifeln.

grüße
thomas

[Michael Schröpl]

Hi Thomas,

ich bewege mich gerade auf ziemlich dünnem Eis, nämlich im Reich von CSS,
vor allem mit deinen sehr weitreichenden formatierungswünschen. ;-)

Ist das echt schon so exotisch, was ich haben will?

2. Beide Klassen sollen umgebrochene Folgeabschnitte (eingeleitet mit <br />) um 2 Zeichen einrücken, weil das 1. Zeichen der 1. Zeile
     (A/F) eine Sonderbedeutung hat.
   was ist (A/F) ?

(off topic) http://www.lepanto.de/newbies/regeln.htm

Was will ich damit erreichen?

1. Ich will die <u> und <br>   loswerden,
   wirst aber letzlich nicht wirklich können.

Mit meinen aktuellen Einstellungen (monospace, positive Einrückung um zwei
definierte Zeichenbreiten, negative Einrückung der 1. Zeile um zwei Zeichen-
breiten) bin ich die beiden Leerzeichen schon mal losgeworden.
Das ist ja der Grund, warum ich bisher monospace nehmen muß - dafür kann
ich die erforderlichen Einrückungen pixelgenau ausrechnen.

Das <br /> brauche ich natürlich weiterhin, weil ich die Umbruchstelle explizit
angeben muß.
(Würde ich die verschiedenen möglichen Inhalte via XML beschreiben und den HTML-
Code daraus generieren, dann wäre es kein Problem, jeweils die Position des bzw.
der <br /> - es können ggf. auch mehrere werden, wenn alles auf einmal vorliegt

• zu beschreiben.)

Gäbe es eine Möglichkeit, nach diesem 1. Zeichen eine Art
"Tabulator-Position" zu setzen,
nein. was du machen könntest ist:
br:after { content:"  "; }

Iiiih - das sieht ja "schmutzig" aus ... ;-)

das fügt dir die zwei zeichen ein, aber es ging bei mir nur mit
NS6.1. (IE5.5. kann es nicht)

Sowohl Netscape 6.2.1 als auch Mozilla 0.9.8 fügen nicht etwa zwei
Leerzeichen ein, sondern exakt das, was im "content" angegeben ist.
Man sieht im Browser also das "  "! (Offenbar wird das "&"
als entity codiert eingefügt.)
Und wenn ich zwei normale Leerzeichen einfügen lasse, dann hat das wieder
keinen einrückenden Effekt.

Außerdem sind dann diese Zeichen im Falle von <p class="failed"> natürlich
auch noch unterstrichen. Das will ich aber nicht.
Ich will eine negative Einrückung um die Breite dessen, was in der 1.
Zeile links herausragen kann. Das sind "A " und "F "; wenn ich monospace
verwende, dann weiß ich, wie breit die sind - so kriege ich meine Ein-
rückung ja bereits prima hin.
Meine Frage war nur, ob es in CSS bereits eine Möglichkeit gibt, meinen
"Spaltensatz" ohne monospace und ohne Tabellen hinzukriegen. Falls nicht,
nehme ich das gerne hin ...

Sämtliche anderen modernen Browser (Opera 6, M$IE 6, Amaya 5.3) ignorieren
diese Angabe übrigens.

3. Innerhalb der <p class="failed"> kann es vorkommen, daß ich
      eine Zusatzangabe brauche. Diese will ich dann in einer
      dritten Farbe haben und - das ist wichtig - nicht unterstrichen.
      Gibt es eine Möglichkeit, den gewünschten Effekt mit CSS für
      die 6er-Browser zu erreichen?

span.retreat, p.failed:first-child    { color:#FF0000; text-decoration:none; }
p.failed:first-child würde schon für NS6.1 reichen

Ups - das ist nicht das, was ich meinte.
Netscape 6.2.1 macht mir bei first-child den gesamten <p> so, wie ich nur
das <span> darin haben wollte.

Der erste Teil des Inhalts von <p class="failed"> muß unterstrichen bleiben.
_Nur_ der eingebettete <span class="retreat"> darf nicht unterstrichen sein.

Es gibt vier Fälle für meine <p>-Inhalte
1. "hat funktioniert"
2. "hat nicht funktioniert"
3. "hat nicht funktioniert und löst retreat aus, der funktioniert hat"
4. "hat nicht funktioniert und löst retreat aus, der auch nicht funk-
   tioniert hat (dafür aber Seiteneffekte auf andere Objekte bewirkt)"
Und in Fall 3 und 4 brauche ich eben einen _Teil_, den ich unabhängig vom
Rest unterstreichen können muß oder eben auch nicht. Unterstrichen wird
immer genau das, was nicht funktioniert hat.
Dieser Teil gehört aber logisch zur selben Informationseinheit - deshalb
möchte ich denselben Tag nehmen und darin mit <span> eine logische Unter-
Einheit bilden.

Außerdem brauche ich noch eine zweite Art von "Einbettung", die ich eben-
falls nicht unterstreichen darf: Bei "A Bel-Lon ? >ex!" ist das "?" wieder
etwas Anderes, das demnächst sein eigenes <span> bekommen wird (das ist
der "Grund", wieso "A Bel-Lon" nicht funktioniert hat).

Also:

• "A Bel-Lon" muß in Farbe X und unterstrichen sein,
• "?" in Farbe Y und niemals unterstrichen,
• ">ex!" in Farbe Z und im vorliegenden Falle ebenfalls nicht unterstrichen.

Und notieren möchte ich das als
   <p class="failed">A Bel-Lon <span class="reason">?</span><br /><span class="retreat">>ex!</span></p>
und dann mit CSS so formatieren, daß es aussieht wie angegeben.

"?" ist nichts qualitativ Neues gegenüber ">ex!", deshalb hatte ich es zur
Vereinfachung erst mal weggelassen. Wenn ich ein <span> hinkriege, dann
kriege ich auch viele verschiedene <span>s hin.

Das ist im Moment mein größtes Problem - denn die Unterstreichung
ist _semantisch_ falsch im Sinne meiner Auswertung, damit kann ich
damit wird mein vorschlag mit "p.failed:first-child" ausser gefächt
gesetzt, es sei denn du führst eine andere klasse für p bei solchen
fällen ein.

Nochmal: In allen Fällen, in denen ich <p class="failed" verwende, muß
alles, was _nicht_ selbst innerhalb von eingebetteten <span>s liegt,
in _jedem_ Fall unterstrichen werden.
_Nur_ die Unterstreichung dessen, was innerhalb von diversen <span>s
liegt, soll von der Klasse des jeweiligen <span> abhängen.
Mit der Farbe klappt das tadellos - mit der Unterstreichung nicht.

4. Mozilla macht
   meinst du hier NS6.x oder richtig mozilla?

Sowohl als auch. (Ich habe im Moment Netscape 6.2.1 und Mozilla 0.9.8
offen, und ein halbes Dutzend anderer Browser ebenfalls ...)

mehr als was du schon getan hast gibt es dazu nicht zu tun/sagen.
es sei denn  im <td> (was dann nicht mehr strict xhtml sein kann)

Okay.

Und warum werde ich für jede einzelne Über-Definition gewarnt?
hat schon Sven erklärt.

Bei den Hintergrundfarben verstehe ich das.
Aber warum werde ich gewarnt, wenn ich eine Schriftgröße z. B. für ein
<td> in einer lokalen CSS-Datei umdefiniere? Was ist daran "schlimm"?

Aber CSS sollte es eigentlich schon sein.
umgekehrt, ein css fähiger browser solle es schon sein.

Okay. An dieser Stelle strebe ich in der Tat XHTML 1.0 strict und CSS
an, _wenn_ es die modernen Browser dann wirklich anzeigen können.

Die Sache mit der eingebetteten Unterstreichung ist aber der Knackpunkt,
der das gesamte Projekt zum Scheitern bringen könnte.
Wenn _kein_ Browser mein Dokument richtig anzeigen kann, dann muß ich
bei <u> bleiben, also in der "Steinzeit".
(Amaya macht als einziger aktueller Browser zwar die Unterstreichung wie
gewünscht, dafür aber einige andere Dinge ziemlich seltsam.)

P.S.: Vielleicht eignet sich meine Problemstellung sogar dafür,
gleich ein XML-Dokument zu verwenden (die Inhalte dürften sich
prima als DTD beschreiben lassen, wenn ich davon auch nur einen
Schimmer einer Ahnung hätte);
es ist egal ob du es jetzt in HTML oder in XML schreibst (gut mit XML
könntest du die regel und struktur besser erfassen) da du dein xml
datei auch darstellen musste und das geht nun mal im web über html,
also bist du wieder am ausgangspunkt.

Nein, ich meinte wirklich gleich XML als Darstellung (via CSS).
So arg weit dürfte ich ja davon gar nicht mehr entfernt sein, wenn ich
mal XHTML 1.0 strict erreicht habe, also sämtliche Formatierungen via CSS
vornehme. Oder?

seit IE5 und NS6 kannst du es direkt mit xml+css versuchen, aber dass
die darstellung dadurch besser wird, dürfen wir alle bezweifeln.

Genau letzteres wollte ich hören, danke.
Dann also warten auf das Christkind, äh - auf Browser 7.0 ...

Viele Grüße
      Michael

[Thomas J.S.]

Hallo Michael,

Ist das echt schon so exotisch, was ich haben will?

ja. ziemlich. ;-)

Sowohl Netscape 6.2.1 als auch Mozilla 0.9.8 fügen nicht etwa zwei
Leerzeichen ein, sondern exakt das, was im "content" angegeben ist.
Man sieht im Browser also das "  "! (Offenbar wird das "&" »» als entity codiert eingefügt.)

habe weder den einen noch den anderen verbrecher auf meine platte.

und ich kann dir nur sagen (nach dem ich mich selbst gerade mehr als 2 stunden über die *besch....* browser und ihren dämlichsten versionen geärgert habe),  es gibt leider keine möglichkeit für die realisierung deiner wünsche. (zumindest nicht ohne irgendwelche verrenkungen im code)

Sämtliche anderen modernen Browser (Opera 6, M$IE 6, Amaya 5.3) ignorieren diese Angabe übrigens.

modern?!? dass ich nicht lache! (habe ich gesagt, dass ich mich grade super über die "moderenen" browser geärgert habe)

span.retreat, p.failed:first-child    { color:#FF0000; text-decoration:none; }
p.failed:first-child würde schon für NS6.1 reichen

Ups - das ist nicht das, was ich meinte.
Netscape 6.2.1 macht mir bei first-child den gesamten <p> so, wie ich nur das <span> darin haben wollte.

dann ist der browser ein größerer mist als der IE.

Und notieren möchte ich das als
   <p class="failed">A Bel-Lon <span class="reason">?</span><br /><span class="retreat">>ex!</span></p>
und dann mit CSS so formatieren, daß es aussieht wie angegeben.

warum hängst so sehr am <p>? nur weil es 2 zeichen weniger hat als <div>? bitte sage nicht, dass das der grund ist!

Nochmal: In allen Fällen, in denen ich <p class="failed" verwende, muß alles, was _nicht_ selbst innerhalb von eingebetteten <span>s liegt, in _jedem_ Fall unterstrichen werden.

ich habe schon richtig verstanden was du möchtest, aber wenn die browser es nciht kapieren kann ich bzw. du auch nichts machen.

_Nur_ die Unterstreichung dessen, was innerhalb von diversen <span>s liegt, soll von der Klasse des jeweiligen <span> abhängen.
Mit der Farbe klappt das tadellos - mit der Unterstreichung nicht.

nochmal: warum unbedingt <p>?

Bei den Hintergrundfarben verstehe ich das.

übrigens ich werstehe ich warum die die hintergrundfarben 20% größeren css datei verursachen.

* { background-color:white; } und ist alles erledigt. (ich sage nciht, dass die browser es verstehen, aber der validator auf alle fälle.)

Aber warum werde ich gewarnt, wenn ich eine Schriftgröße z. B. für ein  <td> in einer lokalen CSS-Datei umdefiniere? Was ist daran "schlimm"?

es ist nicht schlimm, aber du bekommst eben eine warnung.
das soll kein ärgerniss sein, sondern eine hilfe. es könnte ja sein, dass du das nicht so beabsichtigt hast. und wenn doch, dann kannst du die warnung ignorieren.

Die Sache mit der eingebetteten Unterstreichung ist aber der Knackpunkt, der das gesamte Projekt zum Scheitern bringen könnte.
Wenn _kein_ Browser mein Dokument richtig anzeigen kann, dann muß ich  bei <u> bleiben, also in der "Steinzeit".

ja, dass muss du. der aufwand es doch mit css zu realisieren wäre a) viel zu hoch b)äußerst kurzlebig (bis zur nächten unter-unterversion eines browsers)

Nein, ich meinte wirklich gleich XML als Darstellung (via CSS).
So arg weit dürfte ich ja davon gar nicht mehr entfernt sein, wenn ich mal XHTML 1.0 strict erreicht habe, also sämtliche Formatierungen via CSS vornehme. Oder?

es ist egal. nur weil es ein xml dokument ist, wird die CSS implementierung eines browser nicht plötzlich besser.

Genau letzteres wollte ich hören, danke.
Dann also warten auf das Christkind, äh - auf Browser 7.0 ...

ja. leider. alle hersteller spucken große tötn, aber wenn es wirklich darauf ankommt ist einer browser unfähiger als der andere. und das ist ziemlich das einzige disziplin in dem alle miteinander sehr sehr gut sind.

grüße
thomas

[Thomas J.S.]

die tippfehler sind ausdruck meiner künstlerischen freiheit.
(oder ich bin schlichtweg schon unkonzentriert weil müde)

grüße
thomas

[Michael Schröpl]

Hi Thomas,

Sämtliche anderen modernen Browser (Opera 6, M$IE 6, Amaya 5.3)
ignorieren diese Angabe übrigens.
modern?!? dass ich nicht lache! (habe ich gesagt, dass ich mich
grade super über die "moderenen" browser geärgert habe)

Ich meine mit "modern" nicht etwa "gut", sondern im Gegenteil "das
aktuellste, was es von diesen Firmen gibt". Wenn das dann nicht tut,
ist es in der Tat besonders schrecklich.

Ich verlange ja gar nicht, daß meine Datei mit irgendwelchen älteren
Browsern perfekt aussehen soll.
Ich möchte herausfinden, ob es mit reinem CSS-Einsatz schon mit _irgend_
einem Browser geht, bzw. wie nahe ich an mein Ziel heran komme. Und die
Unterstreichung wäre mir von allen Wünschen deutlich am wichtigsten -
alles andere ist entbehrlich.

Und notieren möchte ich das als
   <p class="failed">A Bel-Lon <span class="reason">?</span><br /><span class="retreat">>ex!</span></p>
und dann mit CSS so formatieren, daß es aussieht wie angegeben.
warum hängst so sehr am <p>? nur weil es 2 zeichen weniger hat als
<div>? bitte sage nicht, dass das der grund ist!

In gewisser Weise sind diese Informationseinheitem für mich so etwas wie
Zeilen. Hätte ich nämlich unendlich viel Platz in der Breite, dann würde
ich sie nicht umbrechen. Ich habe diesen Platz aber weder im Browser-
Fenster noch auf Papier, und ich will diese Inhalte in Spalten neben-
einander darstellen (andere Leute machen das untereinander, was viel
mehr Platz verschwenden würde).
Aber ich werde gerne <div> nehmen, wenn mich das irgendwie weiter bringt.

Bei den Hintergrundfarben verstehe ich das.
übrigens ich werstehe ich warum die die hintergrundfarben 20%
größeren css datei verursachen.
* { background-color:white; } und ist alles erledigt.
(ich sage nciht, dass die browser es verstehen, aber der validator
auf alle fälle.)

Ist das denn dann semantisch noch richtig?

Mein <body> _hat_ eine Hintergrundfarbe (ungefähr diejenige meines
Hintergrundbildes - für den Fall, daß der Besucher Bilder abgeschaltet
hat); diese Definition möchte ich durch '*' nicht überschreiben.

Aber warum werde ich gewarnt, wenn ich eine Schriftgröße z. B.
für ein  <td> in einer lokalen CSS-Datei umdefiniere?
Was ist daran "schlimm"?
es ist nicht schlimm, aber du bekommst eben eine warnung.
das soll kein ärgerniss sein, sondern eine hilfe. es könnte ja sein,
dass du das nicht so beabsichtigt hast. und wenn doch, dann kannst
du die warnung ignorieren.

Könnte ich - aber ich hätte gerne ein "warnungsfreies" CSS-valides
Dokument, und ich bin der Meinung, daß ich nichts verkehrt mache ...

Ich habe diese Warnungen jetzt dadurch "totgemacht", daß ich in meiner
lokalen CSS-Datei die tags nur in speziellen Kontexten umdefiniere.
Das ist nicht exakt das, was ich wollte, und es kostet mich sogar mehr
Platz in den HTML-Dokumenten (weil ich dort über Klassennamen eindeutige
lokale Kontexte bauen muß).
Aber ich hasse es, in unberechtigten Warnungen zu ertrinken und dann
die eigentlich wichtigen Meldungen zu überlesen. Wenn schon validiert,
dann gleich richtig sauber.

Die Sache mit der eingebetteten Unterstreichung ist aber der Knackpunkt, der das gesamte Projekt zum Scheitern bringen könnte.
Wenn _kein_ Browser mein Dokument richtig anzeigen kann, dann muß ich  bei <u> bleiben, also in der "Steinzeit".
ja, dass muss du. der aufwand es doch mit css zu realisieren wäre
a) viel zu hoch
b) äußerst kurzlebig (bis zur nächten unter-unterversion eines browsers)

Letzteres verstehe ich nicht ganz. Werden die CSS-Interpretationen
der Browser denn üblicherweise wieder schlechter mit neuen Versionen?

Viele Grüße
      Michael
(der in der Tat in Mozilla 0.9.7+ einen CSS-Darstellungsbug erleiden muß,
 der in Mozilla 0.9.4 noch nicht vorhanden war - ein Kunde war heute mit
 Mozilla 0.9.8 auf der mit Netscape 6.2 erfolgreich getesteten Seite, und
 die tut damit nicht mehr, schluchz ...)

[Thomas J.S.]

hallo Michael,

Ich meine mit "modern" nicht etwa "gut", sondern im Gegenteil "das
aktuellste, was es von diesen Firmen gibt".

dann meinten wir das selbe untern "modern".

In gewisser Weise sind diese Informationseinheitem für mich so etwas wie Zeilen. Hätte ich nämlich unendlich viel Platz in der Breite, dann würde ich sie nicht umbrechen. Ich habe diesen Platz aber weder im Browser-Fenster noch auf Papier, und ich will diese Inhalte in Spalten nebeneinander darstellen (andere Leute machen das untereinander, was viel mehr Platz verschwenden würde).

das war mir schon klar, aber das erklärt nicht warum <p> und nicht <div>

Aber ich werde gerne <div> nehmen, wenn mich das irgendwie weiter bringt.

das würde es. da <p> einfach einen echten absatzt für jeden browser signalisiert und sie ihn immer anderes behandel, nicht so beim <div> der einfach einen kontainer darstellt.

* { background-color:white; } und ist alles erledigt.
(ich sage nciht, dass die browser es verstehen, aber der validator
auf alle fälle.)

Ist das denn dann semantisch noch richtig?

Mein <body> _hat_ eine Hintergrundfarbe (ungefähr diejenige meines
Hintergrundbildes - für den Fall, daß der Besucher Bilder abgeschaltet hat); diese Definition möchte ich durch '*' nicht überschreiben.

ja, * { background-color:white; }  ist vollkommen richtig; mit stern * matchst du alle elemente. und wenn die diese definition als erstes in deiner css datei hast, kannst du sie später über die einzelen tagspezifischen css-angaben überschreiben.

Könnte ich - aber ich hätte gerne ein "warnungsfreies" CSS-valides
Dokument, und ich bin der Meinung, daß ich nichts verkehrt mache ...

du machst nichts verkehrt!
eine der vorteile vom css ist eben, dass ich bereits definierte css-angaben später überschreiben kann.

z.B. zentrale css für alle dateien und in einer einzigen datei möchte ich eine einzige angabe anderes haben, dann kann ich dass durch eine erneute definition für das betroffene element erreichen, wobei die früheren anganben überschrieben werden.

gehe davon aus, dass hier der validator überflüssigerweise mackert, oder nimme die warnungen als freundliches zuwinken: "hallo, wolltest du das bestimmt so?"

Die Sache mit der eingebetteten Unterstreichung ist aber der Knackpunkt, der das gesamte Projekt zum Scheitern bringen könnte.
Wenn _kein_ Browser mein Dokument richtig anzeigen kann, dann muß ich  bei <u> bleiben, also in der "Steinzeit".
ja, dass muss du. der aufwand es doch mit css zu realisieren wäre
a) viel zu hoch
b) äußerst kurzlebig (bis zur nächten unter-unterversion eines browsers)

Letzteres verstehe ich nicht ganz. Werden die CSS-Interpretationen
der Browser denn üblicherweise wieder schlechter mit neuen Versionen?

teilweise kann das vorkommen. aber das meinte ich damit nicht, es kann auch einfach sein, dass sie angaben die sie früher soundso interprätiert haben, jetzt so-und-so interprätieren. die angaben können dabei trotzdem dem standard entsprechen. (nach dem motto: es führen viele wäre nach rom)

grüße
thomas