nicht angemeldet
Hallo Leute,
erst mal ein paar Links zum Aufwärmen:
http://www.schroepl.net/pbm/partien/yield/_1906_h/boerse.htm
und http://jigsaw.w3.org/css-validator/validator?uri=http://www.schroepl.net/pbm/partien/yield/_1906_h/boerse.htm
Die entsprechende Tabelle enthält rechts jeweils kleine Balken, welche die Änderung der Zahlenwerte gegenüber der vorherigen symbolisieren sollen. Drüberfahren mit der Maus aktiviert einen entsprechenden Tooltip (<img title="aktion">).
In allen Zeilen außerderjenigen von Dabbelju funktioniert es wie gewünscht mit allen modernen Browsern. Dort habe ich jeweils 1px-GIFs verwendet.
Nun möchte ich aber auch noch die Farbtöne den exakten Beträgen entsprechend 'stufenlos' erzeugen (jeweils 127 verschiedene Intensitäten für grün bzw. rot wären okay). Dafür aber 255 kaum noch cacheable GIFs zu verwenden und massenhaft HTTP-Requests zu provozieren, das kann's nicht sein. Das Problem schreit nach einer Lösung mit CSS.
Statt
<img src="buy1000.gif" alt="" title="+4172" height="10" width="6" />
möchte ich also
<span class="col" title="+4172" style="height:10px;line-height:10px;color:#009900;background-color:#009900;">_</span></td>
verwenden, oder etwas halbwegs Gleichwertiges. (<div> funktioniert beispielsweise überhaupt nicht, weil es in allen Browsern automatisch einen Umbruch auslöst, obwohl ich das dem <td> mit "white-space:nowrap;" explizit verboten habe).
Das angegebene <span>-Konzept habe ich in der Zeile von "Dabbelju" mal ausprobiert. Wenn jetzt noch die Browser das tun würden, was ich haben möchte ...
Im M$IE 5.5 funktioniert es nahezu perfekt - wenn man davon absieht, daß der Tooltip im Gegensatz der Variante auf dem GIF nun vie verrückt blinkt.
Aber immerhin stimmt die Größe des Balkens - und darum geht es mir bei meinem aktuellen Experiment. Ich brauche allerdings sowohl "height:" als auch "line-height:", ohne daß mir klar wäre, wieso.
Mozilla 0.9.9. ignoriert sämtliche Höhenangaben des <span> und stellt den Balken offenbar so hoch dar wie dsa <td>. Das ist für meine Zwecke unbrauchbar.
Opera 6.0 macht zunächst mal dasselbe wie Mozilla, aber darüber hinaus läßt es den Balken nach unten über den Zellenrand hinaus ragen. Das ist noch schlechter.
Außerdem ignoriert Opera den Inhalt des <span> vollständig, wenn dieser nur einen scheinbar nicht anzuzeigenden Inhalt hat, also keinen, ein Leerzeichen oder sogar ein . Deshalb mußte ich einen '_' verwenden - was mich wiederum dazu zwingt, für jedes <span> auch noch die "color:" auf denselben Wert wie die "background-color:" zu setzen (was bei über 100 Tabellenzellen das Dokument um fast 2 KB aufbläst).
Ich hätte nun gerne Tips, ob - und wie - ich meine Balken ohne Verwendung von GIFs malen kann, so daß es in M$IE 5.5+, Opera 6+ und Mozilla 0.9.9+ funktioniert.
Die zentrale Frage scheint mir zu sein, wie ich die Höhe eines <span> innerhalb eines <td> abweichend von den Eigenschaften des sonstigen <td>-Inhalts setzen kann ...
Viele Grüße
Michael