[HTML] Problem mit tiefgestellten Zahlen und Zeilenabstand

[Mr. Snoot]

Hio,

ich hab auf meiner Homepage des öfteren tiefgestellte Zahlen. Komischerweise verändert sich dann der Zeilenabstand zur Zeile davor und danach. Jedoch ist das nicht immer so und auch nicht immer in gleichem Maße.

Es lässt sich auch nicht erkennen, woran es liegt. Als Beispiel mal drei Bilder; in jeder Zeile stehen in diesem Fall zwei Formeln mit jew. 3 tiefgestellten Zahlen, in den Zeilen darüber und darunter oder in der näheren Umgebung sind sonst keine Formatierungen im Text. Die Klammern ändern nichts daran, ebenso nicht dass die Formeln einmal am Zeilenende stehen und anderswo mittendrin.

Die Zeilenabstände werden mittels externer CSS Datei eingestellt: line-height:15pt;

Hat jemand ne Idee, woran das liegen könnte?

 

[Enigma]

Mit line-height erzwingst du eine gewissen Zeilenhöhe. Die Zeilenhöhe berechnet sich normalerweise aus der Schriftgröße.
Wenn nun die Zeilenhöhe kleiner ist, als die Höhe die dein Text einnimmt (sowohl mit hoch als auch tiefergestellten Zeichen), dann muss der Browser entscheiden wie er es darstellen soll:
- Abschneiden
- Zeilenhöhe anpassen

Deinen Bildern nach zu urteilen, passt der Browser die Zeilenhöhe an - jedoch ein bisschen überdimensioniert würde ich sagen

Kannst du vielleicht ein Stück-HTML +CSS Code aus deiner Page herauskopieren, die genau den Problemfall wiederspiegelt? Dann werd ich versuchen das Problem zu finden.

 

[Mr. Snoot]

HTML-Teil:

<span class="bericht_text">Werden den Prozessgasen noch Diboran
 (B<sub>2</sub>H<sub>6</sub>) oder Phosphin (PH<sub>3</sub>) ... </span>

CSS-Teil:

.bericht_text {
		font-family:Verdana, Arial, Helvetica, Sans-Serif;
		color:#7d7d7d;
		font-weight:none;
		font-size:8pt;
		text-decoration:none;
		line-height:15pt;
}

Deinen Bildern nach zu urteilen, passt der Browser die Zeilenhöhe an - jedoch ein bisschen überdimensioniert würde ich sagen

Nicht nur überdimensioniert, sondern eben auch unterschiedlich.

 

[Enigma]

Also ich muss zugeben, dass die Browser doch ein sehr ungewöhnliches Verhalten diesbezüglich zeigen.

Gecko
Zeigt alles korrekt an, egal welche Angaben im CSS stehen

Opera
Zeigt es nicht korrekt an. Dieser Browser kocht sein eigenes Süppchen, indem er zu jeder Zeilenhöhe die zusätzliche Höhe für den sup/sub Text hinzuaddiert. Also wenn du eine Zeilenhöhe von 15pt hast - hast du im Endefekt: 15pt + sup-höhe + sub höhe. Somit werden die Zeilen höher wenn du nur sub/sup verwendet - und noch höher wenn du beides in einer Zeile verwendet.

IE
Ähnliche Darstellung wie Opera, nur nicht so extrem. Die Zeilen werden nur minimal höher.


Was ich herausgefunden habe: Wenn man die CSS-Option: vertical-align: middle; angibt, stellen es die Browser auch plötzlich unterschiedlich dar.

Ich kuck mir das in ca. 2 Stunden nochmal an - muss jetzt leider wech.

Edit:
Also ich hab mir das nochmal angekuckt und habe leider keine Möglichkeit gefunden, die Darstellung in allen Browsern gleich hinzubekommen.
Wenn du dir die Datei 62.111.48.30/csstest.html mal in allen Browsern ankuckst wirst du feststellen, dass sie im Mozilla perfekt dargestellt wird.
Der IE stellt sie leicht falsch dar (Zeilenhöhe schwankt um 3Pixel).
Opera entstellt die Seite jedoch komplett.

 

[Mr. Snoot]

So ein Müll, aber danke für die Mühe die ich gemacht habe

Gibt's denn vielleicht eine Formatierung mittels CSS um Zahlen tiefzustellen?