line-height wird fehlerhaft dargestellt

[insanityivy]

Also ich habe jetz eine index.html und dort drin eine Liste.

<div id="box">
  <ul id="navigation">
    <li><a href="landscapes.html">landscapes</a></li>
    <li><a href="">stuff</a></li>
    <li><a href="">textures</a></li>
    <li><a href="">contact</a></li>
  </ul>
</div>

Jetz habe ich versucht über eine externe Datei die Linienhöhe zu verändern, mit line-height.

ul#navigation {
list-style-type:none;
margin:15px 0px; padding:0px; margin-right:100px;
line-height:23px;
}

ul#navigation li a {
text-decoration:none;
color:#00ff5a;
font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:500; font-size:36px;
letter-spacing:0.004em; text-transform:uppercase;
}

ul#navigation li a:hover {
color:#00ffe4;
}

Also in meinem Firefox wird die line-height richtig interpretiert. Aber im Internet Explorer wird alles irgendwie "gestaucht" dargestellt. Noch viel enger beisammen, sozusagen.

[Ingo Turski]

Hi,

line-height:23px;

font-size:36px;

diese Angaben passen nicht zusammen und daher sollte line-height ignoriert bzw. auf den minimal möglichen Wert vergrößert werden.

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Hello out there!

line-height:23px;
font-size:36px;

diese Angaben passen nicht zusammen und daher sollte line-height ignoriert bzw. auf den minimal möglichen Wert vergrößert werden.

Wie kommste darauf, dass das eine das andere beeinflussen sollte?

„Ist der Wert von 'line-height' kleiner als die Schriftgröße, ist die Höhe der endgültigen Inline-Box kleiner als die Schriftgröße und die dargestellten Glypen „laufen aus der Box heraus“. Berührt eine solche Box die Kante einer Zeilen-Box, fließen die dargestellten Glyphen auch in die benachbarte Zeilen-Box ein.“ [CSS2 §10.8.1]

Das ist auch in CSS 2.1 noch so. [CSS21 §10.8.1]

Und wo ich gerade in der Spec blättere: Wegen „'line-height' […] Vererbt: Ja“ traf mein Schuss ins Blue nicht ins Schwarze.

See ya up the road,
Gunnar

[Ingo Turski]

Hi,

Wie kommste darauf, dass das eine das andere beeinflussen sollte?

„Ist der Wert von 'line-height' kleiner als die Schriftgröße, ist die Höhe der endgültigen Inline-Box kleiner als die Schriftgröße und die dargestellten Glypen „laufen aus der Box heraus“. Berührt eine solche Box die Kante einer Zeilen-Box, fließen die dargestellten Glyphen auch in die benachbarte Zeilen-Box ein.“ [CSS2 §10.8.1]

Das ist auch in CSS 2.1 noch so. [CSS21 §10.8.1]

Ich verstehe den folgenden Satz
"On a block-level [...] element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element."
so, dass eine zu geringe Angabe für line-height auf die zur Darstellung des Inhalts erforderliche Höhe erweitert wird.

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Hello out there!

"On a block-level [...] element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element."

In der deutschen Übersetzung CSS 2.0:

„Ist die Eigenschaft für ein Element auf Blockebene gesetzt, dessen Inhalt sich aus Elementen auf Inline-Ebene zusammensetzt, gibt sie die minimale Höhe jeder erzeugten Inline-Box an.“

Die Mindesthöhe der Inline-Boxen also, nicht aber die Mindesthöhe der Box des Elements auf Blockebene.

So lese ich das.

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

Bringt es was, 'line-height' nicht für 'ul', sondern für 'li' anzugeben?

Und 'px' ist sicher keine günstige Einheit für die Angabe, weil du über die Schriftgröße beim Nutzer nichts weißt. (Auch in 'px' angegebene Schriftgrößen werden von Browsern skaliert.)

See ya up the road,
Gunnar

[insanityivy]

Jo, habe ich schon versucht es über li zu formatieren, bringt auch leider nichts. Trotzdem Danke.