Höhe eines <span> innerhalb eines <td>

[Kai Lahmann]

hi

STOP! <span> ist ein Inline-Element unt halt als
solches neue height.

ups - mir ist es nicht gelungen, die Aussage in diesem Satz-Fragment fehlerfrei zu decodieren ...

"STOP! <span> ist ein Inline-Element und hat als solches keine height." sollte da stehen - schnelltippen...

Ja, eben. Lauter kaputte Browser, es ist schlimm. Lernen die es denn nie? :-(

lass mal netscape 4 auf die Seite los, dann glaibst du definitiv an den Fortschritt!

Allerdings sind dafür dann sowohl Opera wie auch
IE zu doof -

Und Mozilla auch.
Bisher hat nichts wirklich funktioniert ...

bei mir sag das gut aus, die Balken sind dann allerdings vertikal in der Zelle zentriert..

• Mozilla 0.9.9 und M$IE 5.5 verhalten sich hier übereinstimmend: Beide weigern sich, das neue Blocklevel-<span> in dieselbe Zeile wie den sonstigen <td>-Inhalt zu setzen.

huh? hier saß das <span> in Opera und Mozilla NEBEN dem Text. Allerdings ist dafür eine gewisse Mindestgröße des Browserfensters nötig...

Inzwischen habe ich wenigstens eine Lösung gefunden hat, welche zwar noch eine Verdoppelung der Zellenzahl kosten würde, aber dafür in allen Browsern ohne GIFs und ohne weitere Tabellen funktioniert:

<td>3472-</td>
<td class="col" title="-500" style="line-height:3px;">
<div class="col" style="background-color:#ff0000;"> </div>
</td>

Bei <div> als Blocklevel-Element kann ich die "line-height:" individuell manipulieren, brauche keine "font-height:" und habe deshalb konstant breite Balken (deren Breite via CSS-Datei extern eingestellt wird).

Dafür brauche ich aber leider sowohl im <td> als auch im <div> einen Klassennamen, weil ich das "text-align:" nur im <td> und die "width:" nur im <div> einstellen kann (und class="" in beiden Fällen immer noch kürzer ist als das Attribut selbst).
Im Gegenzug habe ich immerhin die "color:" eingespart, weil Opera 6 den Anzeigefehler von <span> </span> bei <div> nicht mehr macht ... der M$IE 5.5 sein bescheuertes Dauerblinken allerdings schon.

Diese Lösung läßt sich noch leicht tunen:
1. das div kann man auch über "td.col div{}" erreichen - spart die zusätzliche Class für eben dieses.
so hat das dann zu klappen:

td.col{vertical-align:bottom;border-width:0px;}
td.col div{width:10px;cursor:default;}
<td class="col" title="-500">
<div style="height:3px;background-color:#FF0000;">%nbsp;</div>
</div>

diese Lösung hat dann noch den Vorteil, dass das sogar in Netscrap 4 einigermaßen lauffähig ist (mal davon abgesehen, dass der Tooltip fehlt).