nicht angemeldet
IE-Fehler bei first-letter und Listen?
Hallo,
ich habe zwei ul-isten, dazwischen einen p-Absatz. Selbigen habe ich per style-sheet mit einem first-letter bestückt: hier der Teil-Inhalt der validen html-Seite:
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<p>ein p-Absatz</p>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
und hier der Inhalt des eingebundenen Style-sheets:
p:first-letter {font-weight:bold;}
_______
Der IE stellt bei der zweiten Liste keine Bullets dar. (Auch, wenn ich mir per css extra welche definieren....) Fehler im IE? Was sagen die "IE ist eh der bessere"-Verfechter dazu? ;-)
Chräcker
-
Hi,
Haste mal ne URL?
cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.-
Hallo,
klar, hier
http://www.netzwerk-garath-hellerhof.de/test/
die css liegt bei
http://www.netzwerk-garath-hellerhof.de/style/normaltest.css
Chräcker
-
Hi,
voll krass, da ist ja tatsächlich nichts anderes mehr da (was das Problem hätte erklären können).==> wieder ein Grund mehr, den IE nicht zu verwenden...
cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.-
voll krass, da ist ja tatsächlich nichts anderes mehr da (was das Problem hätte erklären können).
Auch ich habe kuerzlich festgestellt, dass gewisse MS IE Versionen Probleme haben mit Listennumerierung/Bullets.
Testseiten:
HTML: http://www.morgain.ch/de2/cd1.html
CSS: http://www.morgain.ch/css/screen.css
und
HTML: http://www.morgain.ch/de2/cd5.htm
CSS: http://www.morgain.ch/css/screen5.cssDie Seiten sind valides HTML 4.0 Transitional, das CSS ist ebenfalls valide. Trotzdem machen bestimmte Win-MS-IE-Versionen (5.0 und 6.0, nicht aber 5.5) keine Numerierung, sondern Bullets oder gar nichts hin bei gewissen OL, abhaengig vom CSS. Unerklaerlich, aber aergerlich.
Ich hoffe, dass die Variante auf der Live-Seite
HTML: http://www.morgain.ch/de2/cd1.html
CSS: http://www.morgain.ch/css/screen.css
ueberall einigermassen "funktioniert". (Die komischen Zeilenumbrueche in MS IE bei sehr schmalen Bildschirmfenstern <700px Breite sind mir bekannt;-)==> wieder ein Grund mehr, den IE nicht zu verwenden...
Dafuer habe ich bei den gleichen Seiten mit Erstaunen und Freude festgestellt, dass der MS IE (getestet: Win 5.0 und 5.5) beim Ausdrucken ein alternatives Dokument nimmt, das mit
<link rel='alternate' href='http://www.example.com/datei.html' media='print' type='text/html' title='Druckversion'>
im HEAD angegeben ist.Das gibt dem MS IE bei mir wieder Bonuspunkte.
Trotzdem: Opera rulez! :-)
mfg
Thomas-
Hallo, Thomas,
Auch ich habe kuerzlich festgestellt, dass gewisse MS IE Versionen Probleme haben mit Listennumerierung/Bullets.
HTML: http://www.morgain.ch/de2/cd5.htm
CSS: http://www.morgain.ch/css/screen5.cssEs hat übrigens nichts mit float zu tun, sondern mit margin-left und width, siehe: http://home.t-online.de/home/dj5nu/fanhost/css-liststyle2.html.
Die erste Liste ist quasi unformatiert, beziehungsweise nur mit margin-left:2.5em, was fast den Standardwert für die Einrückung im MSIE trifft.
Die zweite Liste unterscheidet sich von der ersten nur in dem Punkt, dass eine Breite mit width angegeben wurde - und schon wird keine Nummerierung mehr angezeigt.
In Version drei geben wir - wie auch bei Chräckers Problem, siehe Axels Posting - padding-left hinzu und die Nummerierung wird wieder sichtbar und width wirkt trotzdem. margin-left ist hier nur zwecks Bündigkeit und Kompatibilität auf Null gesetzt. Die dritte Version sieht in den meisten Browsern gleich aus (für den MSIE <6 prognostiziere ich jedoch den box model bug).Listenformatierung mit CSS ist eine Gratwanderung, siehe http://www.subotnik.net/style/list-box-test.html.
Ich hoffe, dass die Variante auf der Live-Seite http://www.morgain.ch/de2/cd1.html ueberall einigermassen "funktioniert".
Nein, eher nicht - im MSIE 6SP1 sehe ich keine Nummerierung. Mit expliziter Angabe von padding-left (und margin-left) dürfte es aber funktionieren. (Alle Beispiele deiner Testseite lassen sich vermutlich dadurch beziehungsweise durch einige weitere einfache Änderungen für alle Browser funktionsfähig gestalten.)
float:left *und* float:right dürfte übrigens bei zwei Spalten in der Regel nicht nötig sein. (Auf die aktuelle Problematik hat es wahrscheinlich keine Auswirkungen.)
Grüße,
Mathias-
Hallo Mathias,
Danke fuer Deine hilfreiche Antwort.
Es hat übrigens nichts mit float zu tun, sondern mit margin-left und width, siehe: http://home.t-online.de/home/dj5nu/fanhost/css-liststyle2.html.
Danke fuer das Beispiel.
Die erste Liste ist quasi unformatiert, beziehungsweise nur mit margin-left:2.5em, was fast den Standardwert für die Einrückung im MSIE trifft.
Die zweite Liste unterscheidet sich von der ersten nur in dem Punkt, dass eine Breite mit width angegeben wurde - und schon wird keine Nummerierung mehr angezeigt.Aha, daran liegt es also...
In Version drei geben wir - wie auch bei Chräckers Problem, siehe Axels Posting - padding-left hinzu und die Nummerierung wird wieder sichtbar und width wirkt trotzdem.
So weit so gut...
Beim vierten Beispiel auf Deiner Testseite zeigt uebrigens auch der MS IE 5.5 Win lauter "einsen" (1.) an. Der ist sonst sattelfester mit den Listennumerierungen als sein Vorgaenger (5.0) und Nachfolger (6.0).
Listenformatierung mit CSS ist eine Gratwanderung, siehe http://www.subotnik.net/style/list-box-test.html.
Ich kannte die Seite und wusste, dass es eine sehr heikle Sache ist. Deshalb versuchte ich auch, die OL selbst _gar_nicht_ mit CSS zu formatieren, sondern nur den P floaten zu lassen. Aber das klappte offenbar nicht:
Ich hoffe, dass die Variante auf der Live-Seite http://www.morgain.ch/de2/cd1.html ueberall einigermassen "funktioniert".
Nein, eher nicht - im MSIE 6SP1 sehe ich keine Nummerierung. Mit expliziter Angabe von padding-left (und margin-left) dürfte es aber funktionieren. (Alle Beispiele deiner Testseite lassen sich vermutlich dadurch beziehungsweise durch einige weitere einfache Änderungen für alle Browser funktionsfähig gestalten.)
Ich habe mal eine weitere Testseite gemacht:
http://www.morgain.ch/de2/cd6.htm
http://www.morgain.ch/css/screen6.cssLeider ist der Text in einigen LI-Elementen etwas laenger und geht nun ueber zwei Zeilen. Da macht der MS IE (aber z.T. auch Opera) ploetzlich komische Sachen - die zweite Zeile ist weniger tief eingerueckt als die erste. Das sieht ziemlich haesslich aus, und dafuer fand ich keinen anstaendigen Workaround. ( moechte ich vermeiden).
Es ist zum Verzweifeln. Langsam denke ich, dass nur eine Tabelle mit "hart codierten" Nummern in der linken Spalte garantieren wuerde, dass auch die kaputten MS IE wirklich brav die Nummern der Lieder anzeigen.
Ich hoffe natuerlich noch immer auf die Universalloesung, die auch in diesen Schrott-Browsern funktioniert.
float:left *und* float:right dürfte übrigens bei zwei Spalten in der Regel nicht nötig sein. (Auf die aktuelle Problematik hat es wahrscheinlich keine Auswirkungen.)
Da hast Du natuerlich recht - es ist wohl ueberfluessig. Ich habe das float:right mal weggemacht.
Freundliche Gruesse und nochmals herzlichen Dank,
Thomas
-
Hallo Thomas,
Beim vierten Beispiel auf Deiner Testseite zeigt uebrigens auch der MS IE 5.5 Win lauter "einsen" (1.) an. Der ist sonst sattelfester mit den Listennumerierungen als sein Vorgaenger (5.0) und Nachfolger (6.0).
Ja, das war beabsichtigt. ;) Ich habe lediglich vergessen, es zu erwähnen. Ich bin dabei auf einen weiteren Bug im MSIE 6 gestoßen, danke auch für den Hinweis, dass es auch im MSIE 5.5 diesbezüglich Probleme gibt.
Ich habe mal eine weitere Testseite gemacht:
http://www.morgain.ch/de2/cd6.htm
http://www.morgain.ch/css/screen6.cssJa, die Varianten ab inklusive CD-Block 6.4 funktionieren im Bezug auf die Listen (und nur diesbezüglich ;)) interoperabel, soweit ich es testen kann (Opera 6.05/7, MSIE 6, Mozilla 1.2/1.3b, jeweils Win98).
Was nicht funktioniert, ist das float. Im Opera 6.05 wird die Grafik von CD-Block 6.7 unterhalb der Liste angezeigt. Im Mozilla 1.2 und 1.3b bei CD-Block 6.5 bis 6.7. (Getestet auf: 1024x768 Pixel, volle Fensterbreite, keine horizontale Einschränkung, gleich große Schriftarten.)
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.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.
Dies wiederum lässt sich auf zwei Arten lösen: Entweder man deaktiviert margin-top des div-Elements (dürfte meines Wissens Standard sein) und auch margin-bottom des darüberliegenden p-Elements und gibt dem p-Element nur padding-bottom. Die andere Möglichkeit ist, dass margin-bottom des p-Elements deaktiviert wird (auf Null gesetzt wird) und nur margin-top des div-Elements den Abstand ausmacht. Dadurch werden das p und ol im div auf gleicher Höhe angezeigt.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.
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.
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.
Grüße,
Mathias-
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.htmAllerdings 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.htmMarkup-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
-
-
-
-
-
-
-
-
Hallo Chräcker,
... Fehler im IE?
Das denke ich. Wobei ich beim Ausprobieren auf ein etwas sehr komisches
Verhalten und eventuell einen Workaround gestoßen bin:Wenn im Absatz ein Zeilenumbruch stattfindet, entweder durch soviel
Text, daß er am rechten Fensterrand umbricht oder aber durch ein
eingefügtes <br />, dann wird die Liste wieder richtig mit Bullets
und dem üblichen Abstand angezeigt. Man kann das ganze richtiggehend
beobachten, wenn man das Fenster so klein zieht, daß eine Zeile Text
umbrechen muß. Das Resultat ist witzig: Die Liste springt und hat
plötzlich wieder Bullets.- Tim
--
Zwei Kampagnen:
(a) Bier schmeckt!
(b) Ich bin für die Einrichtung eines Themenbereiches (BARRIEREFREIHEIT)-
Hallo,
... Fehler im IE?
Ja.
Wobei ich beim Ausprobieren auf ein etwas sehr komisches
Verhalten und eventuell einen Workaround gestoßen bin:Weiterer Workaround:
Man gebe für die Liste das padding explizit an. Zumindest IE5.5 macht dann, was er soll. Negative Auswirkungen auf NS7.0 und Opera6.05 sind nicht zu bemerken.<html>
<head>
<title></title>
<style type="text/css">
<!--
p:first-letter {font:30px bold;}
ul {margin:0 0 0 0; padding:0 0 0 20px;}
-->
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul><p>ein p-Absatz</p>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</body>
</html>viele Grüße
Axel
-
Hallo,
und Danke!!! ich hatte wirklich überlegt, ob ich es selbst bei diesem mini-code doch noch geschaft hätte, einen fehler reinzubauen. (Verwende nie p-Absätze zwischen Listen, oder p-Absätz dürfen nur in gerader Anzahl verwendet werden oder so ;-)))
Danke,
mal sehen, welchen Worakround ich nehme. Zum Glück müssen bei mir nur zwei Zeilen Text dazwischen, und da kann ich vielleicht sogar "heimlich" auf die p-Strukturierung verzichten und meinen ersten "bolden" Buchstaben per strong formatieren ;-)
Chräcker
