Unten abgeschnittener Text im Mozilla

[Konrad Rudolph]

Hallo Forum,

ich habe vor kurzem durch Zufall entdeckt, daß man im IE per CSS einen recht interessanten Styleeffekt erzeugen kann.
IMHO ist der Code von mir korrekt, leider sieht der Effekt im Mozilla aber doof aus.

Hier mal ein Screenshot, wie es aussehen _soll_ (aus dem IE):

http://madrat.net/header.png

hier der dazugehörige CSS-Code:

\\ div.bodybox h1{
    font-size:28pt;
    font-weight:bold;
    letter-spacing:3px;
    color:#B6BDD2;
    margin:0 0 7px 0;
    width:600px;
    text-align:right;
    border-bottom:1px #B6BDD2 solid;
    vertical-align:top;
    line-height:22pt;
    overflow:hidden;
    display:block;
}
///

wobei das display:block eigentlich nicht gebraucht wird, ich dachte bloß, daß der Mozilla das eventuell braucht, aber der zeigt bei diesem Code einfach einen Header mit Unterstrich an und es wird nicht so schick abgeschnitten... und genau das will ich!

Gruß,
KonRad -

[at]

Hallo.

ich habe vor kurzem durch Zufall entdeckt, daß man im IE per CSS einen recht interessanten Styleeffekt erzeugen kann.

Sieht wirklich super aus! Ich kann zwar dein Problem nicht lösen, solltest du aber außerhalb dieses Forums eine Lösung finden, poste sie doch bitte hier.
MfG, at

[stefan]

Hallo Konrad,

Hier mal ein Screenshot, wie es aussehen _soll_ (aus dem IE):

Also in meinem IE 5.0 siehts genauso aus wie im Mozilla.

http://madrat.net/header.png

^^^^^^ --> http://forum.de.selfhtml.org/faq/#Q-19

div.bodybox h1{

font-size:28pt;

Für die Bildschirmausgabe eignet sich die Einheit «pt» nicht, da sie - z.B. abhängig vom System - unterschiedlich gross sein kann. Verwende lieber «em» oder «px». Mehr dazu findest Du mit über die http://selfsuche.teamone.de im Forums-Archiv.

[...] vertical-align:top;

Hat meines Wissens nach keinerlei Effekt.

line-height:22pt;

Hier ist der Knackpunkt: «line-height» hat (obwohl der Name dies impliziert) nicht direkt etwas mit der Höhe des Elementes zu tun (also mit dem Anzeigebereich), sondern bezieht sich auf den Raum, der einer Zeile des Elementes zugestanden wird, also eher auf den Abstand zweier Zeilen zu einander.

«height:22pt;» liefert bei Mozilla 1.3 und IE 5.0 den erwünschten Effekt. Wobei auch hier gilt: Verwende für eine Bildschirmausgabe lieber eine andere Einheit als «pt».

[...] display:block;

Hattest Du ja selber schon erwähnt, dass es keinen Effekt hat. Lass es einfach weg.

}

schö
stefan

[Konrad Rudolph]

Hallo,

Also in meinem IE 5.0 siehts genauso aus wie im Mozilla.

ja, ich habe von allen Browsern nur die neueste Version, d.h. IE6.

http://madrat.net/header.png
   ^^^^^^ --> http://forum.de.selfhtml.org/faq/#Q-19

danke.

div.bodybox h1{

font-size:28pt;

Für die Bildschirmausgabe eignet sich die Einheit «pt» nicht, da sie - z.B. abhängig vom System - unterschiedlich gross sein kann. Verwende lieber «em» oder «px».

ja, das weiß ich. Tatsache ist aber, daß allein "pt" genau das liefert, was ich brauche. Es geht mir hauptsächlich darum, daß der Code (preformatted Text) *genauso* angezeigt wird wie in "normalen" Codeeditoren (M$ VS). Das ist mit der Einheit "px" nicht erreichbar, die Buchstaben werden teils gestaucht, allein "10pt" bringt das richtige Ergebnis.

Den Rest habe ich dann aus Gewohnheit so gemacht. "em" kommt mir nicht in die Stube.

[...] vertical-align:top;

Hat meines Wissens nach keinerlei Effekt.

im IE 6 schon.

line-height:22pt;

Hier ist der Knackpunkt: «line-height» hat (obwohl der Name dies impliziert) nicht direkt etwas mit der Höhe des Elementes zu tun (also mit dem Anzeigebereich), sondern bezieht sich auf den Raum, der einer Zeile des Elementes zugestanden wird, also eher auf den Abstand zweier Zeilen zu einander.

ja, das stimmt. Aber zumindest im IE6 wird dadurch das Element auch tatsächlich beschnitten.

«height:22pt;»

*aua*!
Also, das war's. Ich dachte, das hätte ich getestet... eventuell war das "damalige" Release vom Mozilla verbuggt? Hmm...

[...] display:block;

Hattest Du ja selber schon erwähnt, dass es keinen Effekt hat. Lass es einfach weg.

ok.

Also: vielen Dank und ich werde sobald wie möglich auf "px" umstellen...

Gruß,
KonRad -

[Christian Seiler]

Hallo Konrad,

Es geht mir hauptsächlich darum, daß der Code (preformatted Text) *genauso* angezeigt wird wie in "normalen" Codeeditoren (M$ VS). Das ist mit der Einheit "px" nicht erreichbar,

Auf meinem Linux-System kann ich keinen Unterschied zwischen 13px und 10pt erkennen, wenn ich im Mozilla die Auflösung auf 90dpi stelle, wie sie AFAIK auch im Internet Explorer eingestellt ist.

Viele Grüße,
Christian