hi
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).
STOP! <span> ist ein Inline-Element unt halt als solches neue height.
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.
damit ist dieser Browser kaputt.
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.
er stellt das Span 10Pixel hoch dar (die line-height) - sofern die Schriftgröße keinen gröheren Wert erfordert.
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.
und auch kaputt.
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 ...
gar nicht. ein <span> hat keine Höhe. Die korrekte Angabe um in der Zeile zu bleiben UND ein Element mit höhe zu haben wäre zusätzlich display:inline-block; zu setzen. Allerdings sind dafür dann sowohl Opera wie auch IE zu doof - schade, wenn diese Lösung sieht in Mozilla sehr gut aus.
Nicht ganz so schön, aber wenigstens funktionierend ist die Lösung das <span> zunächst auf display:block zu setzen und dann den neuen Kasten mit float:right; NEBEN den Text zu setzen.
Übrigens zeigt bei mir Opera (6.0Beta1/Linux) auch die <span> an, die ein enthalten.
gruss Kai