nicht angemeldet
Hallo Mathias,
Ganz herzlichen Dank fuer die ausfuehrliche Antwort und die Testseite mit den Beispielen.
http://www.morgain.ch/de2/cd6.htm
Was nicht funktioniert, ist das float. Im Opera 6.05 wird die Grafik von CD-Block 6.7 unterhalb der Liste angezeigt. [Mozilla ebenfalls]
Ja, stimmt, diesen Fehler habe ich hier auch bei gewissen Browsern.
Das lässt sich lösen, denn das liegt an der festen Breite für das p. Diese muss folglich zunächst entfernt werden, da es sowieso nur für die Grafik gelten soll, nicht für das p-Element, denn dieses umfasst das floatende ol-Element - wenn man dem p die width nimmt und ihm einen Rahmen gibt, erkennt man es.
Aha, ich dachte, ich muesse dem P eine Breite geben, um es nach rechts floaten zu koennen.
Bei CD-Block 6.5 bis 6.7 lasse ich aber nur die Liste links floaten, und deshalb ist die Breitenangabe fuer das P ja wohl ueberfluessig.
(Eventuell hat da auch noch der Box-Model-Fehler des MS IE mit reingespielt.)
Weiterhin zeigt der Opera 6.05 ol und p vertikal nicht auf derselben Höhe an, auf das p-Element wirkt das margin-bottom des vor dem div liegenden p-Elements, auf das ol-Element jedoch nicht.
[Workarounds]
Danke, dass Du auch diesen kleinen Schoenheitsfehler noch ausgemerzt hast. Der haette mich von allem noch am wenigsten gestoert, aber so ist es natuerlich viel besser.
Leider ist der Text in einigen LI-Elementen etwas laenger und geht nun ueber zwei Zeilen.
Hm, da kannst du höchstens an der Breite des ol-Elements drehen.
Der 3. Liedtitel ist sehr lang (entspricht wohl ca. 25em).
Ich moechte der OL eigentlich nicht eine so grosse Breite (width) vorschreiben, sonst hat das Bild (338px) nur noch neben der OL Platz, wenn das Browserfenster mindestens ca. 1000px ist.
Da macht der MS IE (aber z.T. auch Opera) ploetzlich komische Sachen - die zweite Zeile ist weniger tief eingerueckt als die erste.
Die zweite Zeile? Hm, das kann ich nicht beobachten, oder ich missverstehe ich, mir ist nur das oben beschriebene mit der rechten Spalte aufgefallen, aber die Zeilen der Liste werden in den mir zu Verfügug stehenden Browsern einheitlich und wie gewünscht eingerückt.
Der erste Buchstabe jedes LI-Elements ist schon gleich weit eingerueckt.
Was ich meinte, siehst Du auf dem Screenshot aus MS IE 5.5 (Win 98):
http://www.morgain.ch/img/scr_cd7_msie55win.gif (Achtung: 65kB, obwohl auf 16 Farben reduziert)
D.h. etwa so:
1. Morgaine le Fay
(Morgain)
2. Mrs. Thompson's
(traditional)
Bei den Listenpunkten, die auf zwei Zeilen umgebrochen werden (und das sind bei mir 5 von 6), ist jeweils die erste Zeile mehr eingerueckt als die zweite. Der MS IE macht da also ein Mittelding zwischen "list-style-position: outside" und "inside"... Sehr haesslich, finde ich.
Dieser Fehler laesst sich weder durch margin, padding, noch list-style-position: outside beheben.
Ich hoffe natuerlich noch immer auf die Universalloesung, die auch in diesen Schrott-Browsern funktioniert.
Naja, ob ich die habe, weiß ich nicht, aber unter Beachtung der genannten Probleme ist http://home.t-online.de/home/dj5nu/fanhost/css-liststyle3-float.html recht interoperabel. Ich habe mich dabei an den Varianten 6.5 bis 6.7 versucht, es ginge auch sicherlich anders herum, also dass das p-Element mit dem Bild zuerst kommt und mit float ausgezeichnet wird.
Deine Vorschlaege sind sicher schon viel besser als alles, was ich vorher zustande brachte.
Ich habe sie mal in den Kontext meiner Seite (mit Menue links, ca. 13em breit) eingebaut:
http://www.morgain.ch/de2/cd7.htm (wesentliches CSS im HEAD)
Im MS IE 5.5 sieht es - bis auf den Einrueckungs-Bug bei zweizeiligen LI-Elementen - anstaendig und schoen ausgerichtet aus. Allerdings: nur MS IE verschiebt das Bild auch wirklich unter die Liste, sobald man das Fenster schmaler macht (ca. <900px).
Mozilla (hier nur 1.0) und Opera 5.12/6.0 kommt es nicht in den Sinn, das Bild bei schmalen Fenstern unter die Liste zu verschieben - unter ca. 900px gibt es immer einen horizontalen Scrollbalken, und das Bild bleibt immer rechts von der Liste.
Nach langem Ausprobieren habe ich dann herausgefunden, woran es liegt: Auch das Bild muss noch ein float:left haben, damit es auch in Mozilla und Opera unter die Liste rutscht.
Mit dem Resultat bin ich nun einigermassen zufrieden:
http://www.morgain.ch/de2/cd7a.htm
Allerdings hat es in MS IE immer noch den haesslichen Einrueckungs-Fehler.
Ich spiele sogar mit dem Gedanken, wegen diesen Bugs (Einrueckung, Numerierung) die Liste durch eine Tabelle zu ersetzen, z.B. so:
http://www.morgain.ch/de2/cd7t3.htm
Markup-maessig waere das natuerlich nicht "die feine Art", dafuer waere es fuer die optischen Browser und vor allem fuer den marktdominierenden MS IE eine sichere, optisch befriedigende und stabile Loesung. Und sogar in Lynx sieht es gleich aus, wie eine Liste;-)
Also, nochmals vielen Dank fuer Deine Muehe und die wertvollen Anregungen.
Und allen, die bisher gelesen haben, Danke fuer die Aufmerksamkeit:-)
Ich warte mal, ob noch ein paar Feedbacks kommen, und bespreche dann beim naechsten Treffen mit der Band, wie wichtig ihnen die Listennumerierung und das tadellose Aussehen im MS IE sind.
Diese eine Seite hat mich schon viele Stunden Aerger gekostet, und wieder mal mein Vorurteil bestaerkt, dass "float" immer noch eine sehr, sehr heikle Sache ist :-(
Freundliche Gruesse und eine gute Nacht
Thomas