Hindukusch: Höhe von Listeneintrag

Beitrag lesen

Hallo,

ich versuche mir eine Navigationsleiste zu basteln, die in HTML-Ebene ne simple Liste aus Hyperlinks ist, die erst per CSS formatiert wird.

Allerdings möchte ich in meiner Liste später einige Trennlinien (Seperatoren) haben. Dazu habe ich einfach jeweils einen leeren Listeneintrag der Klasse "seperator" eingefügt:
<li class="seperator"></li>

Ne andere Methode Seperatoren allgemein zu definieren, ist mir nicht eingefallen...

Dieser Zeile mit dem Seperator soll später über CSS ein Hintergrundbild verpasst werden und die Höhe des Listeneintrages angepasst werden.

Im Firefox 2.x wird es korrekt angezeigt, aber im IE wird die Höhe des Listeneintrages einfach nicht angepasst:

Link: http://www.hinducoff.de/test.htm

Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Test</title>
  <style type="text/css">

UL {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 160px;
    }

UL LI {
      height: 32px;
      background-color: #FF0000;
      margin: 0;
      padding: 0;
    }

UL LI.seperator {
      height: 4px;
      background-color: #FFFF00;
    }

</style>
</head>
<body>
  <ul>
    <li><a href="#">Hyperlink 1</a></li>
    <li><a href="#">Hyperlink 2</a></li>
    <li><a href="#">Hyperlink 3</a></li>
    <li class="seperator"></li>
    <li><a href="#">Hyperlink 4</a></li>
    <li><a href="#">Hyperlink 5</a></li>
    <li class="seperator"></li>
    <li><a href="#">Hyperlink 6</a></li>
  </ul>
</body>
</html>