Browser ignorieren Größenangaben

Problem:

Manchmal steht man vor der Aufgabe, zum Beispiel Links eine bestimmte Größe zu geben, um zum Beispiel innerhalb eines Navigationsmenüs den Rollover-Effekt eines Links auf den gesamten zur Verfügung stehenden Platz innerhalb des Menüpunktes auszudehnen. Allerdings ignorieren Mozilla und andere Browser Größenangaben für Links und andere so genannte »non replaced inline-Elemente«. Links, span-Elemente oder ähnliches werden trotz Größenangaben nur so groß, wie ihr Inhalt es erfordert. Aber auch der Internet Explorer lässt sich dazu bewegen, die width- und height-Eigenschaften zu ignorieren.

Unterschiede durch DOCTYPE-Switch in:

Opera 7, Internet Explorer

Ursache:

Die CSS-Eigenschaften width und height gelten nicht für non replaced inline-Elemente, zu denen auch Links gehören. Daher müssen bei standardkonformer Interpretation des Codes Größenangaben für diese Art von Elementen von den Browsern ignoriert werden. Mozilla, Opera 8 und andere Browser verhalten sich hierbei generell korrekt. Der Internet Explorer und Opera 7 verhalten sich dagegen nur im Standards Mode korrekt: Während die Größenangaben in diesem Darstellungsmodus gemäß der CSS-Spezifikation ignoriert werden, werden sie im Quirks Mode unter Verletzung der Spezifikation interpretiert.

Lösung:

Damit Größenangaben auch für non replaced inline-Elemente interpretiert werden, muss der Wert der display-Eigenschaft angepasst werden. Wenn für ein inline-Element z. B. display:block deklariert wird, so können für dieses Element nun auch width und height deklariert werden.

Beispiele:

Größenangaben für Inline-Elemente im Standards Mode

Größenangaben für als Block-Elemente formatierte Inline-Elemente im Standards Mode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Seitentitel</title>

<style type="text/css">
ul a {
  display:block;
  width:6em;
  height:2em;
  color:#eee;
  background-color:#036;
}
ul a:hover {
  color:#036;
  background-color:#bdc9d7;
}
</style>

</head>

<body>

<ul>
  <li><a href="http://www.example.org/">Link 1</a></li>
  <li><a href="http://www.example.org/">Link 2</a></li>
  <li><a href="http://www.example.org/">Link 3</a></li>
  <li><a href="http://www.example.org/">Link 4</a></li>
</ul>

</body>
</html>

Verwandte Themen:

Berechnung von Element-Größen: Der CSS-Box-Model-Bug
Bezugspunkt für Prozentangaben von height: Browser ignorieren Prozentangaben für height

Literatur:

W3C CSS 2-Spezifikation – Breite des Inhaltes: Die width-Eigenschaft
W3C CSS 2-Spezifikation – Höhe des Inhaltes: Die height-Eigenschaft

Letzte Änderung des Inhaltes: 17.09.05