Werner: Horizontale Navigationsleiste in drei Zeilen

Beitrag lesen

SELF-Forum

Horizontale Navigationsleiste in drei Zeilen

Werner
– Informationen zu den Bewertungsregeln

Ich versuchte per CSS eine horizontale Navigationsleiste mit gleichen Breiten in drei Zeilen zu formatieren; leider entsehen im IE unerwünschte Abstände zwischen den Zeilen.

Kann mir bitte jemand einen Tipp geben, was zu tun ist, damit auch im IE das Erscheinungsbild gleich ist? Im Voraus schonmal vielen Dank.

Hier der Quelltext der HTML-Datei inkl. CSS:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Horizontale Navigationsleiste mit gleichen Breiten</title>  
<style type="text/css">  
  body {  
    font: 13px tahoma, arial, verdana, sans-serif;  
    color: black; background-color: #ffffff;  
  }  
  
  ul#Navigation {  
    margin: 0; padding: 0;  
    text-align: left;  
    background-color: #ffffff;  
  }  
  ul#Navigation li {  
    list-style: none;  
    display: inline;  
    margin: 0; padding: 0;  
  }  
  
  ul#Navigation a {  
    float: left; width: 90px;  
 text-align: center;  
 border: 1px solid #ffffff;  
    margin: 0px 5px 0px 0px; padding: 1px 5px 1px 5px;  
    text-decoration: none; font-weight: bold;  
    color: #ffffff; background-color: #3366cc;  
  }  
  * html ul#Navigation a, * html ul#Navigation span {  /* Korrektur fuer IE 5.x */  
    width: 90px;  
    w\idth: 90px;  
  }  
  
  ul#Navigation a:hover {  
    color: #ffffff; background-color: #333399;  
  }  
  
  ul#Navigation span {  
    float: left; width: 90px;  
    margin: 0px 5px 0px 0px; padding: 1px 5px 1px 5px;  
    text-decoration: none; font-weight: bold;  
    color: red; background-color: #ffffff;  
  }  
  ul#Navigation div {  
     clear: left;  
  }  
  
</style>  
</head>  
<body>  
  <p id="#Beispiel">Horizontale Navigationsleiste mit gleichen Breiten ind drei Zeilen<br>  
  leider entsehen im IE unerwünschte Abstände zwischen den Zeilen.</p>  
  
  <ul id="Navigation">  
    <li><span>Bezichnung1</span></li>  
    <li><a href="#Beispiel">Seite&nbsp;1</a></li>  
    <li><a href="#Beispiel">Seite&nbsp;2</a></li>  
    <li><a href="#Beispiel">Seite&nbsp;3</a></li>  
    <li><a href="#Beispiel">Seite&nbsp;5</a><div></div></li>  
  </ul>  
  
   <ul id="Navigation">  
    <li><span>Bezeichnung2</span></li>  
    <li><a href="#Beispiel">Seite&nbsp;6</a></li>  
    <li><a href="#Beispiel">Seite&nbsp;7</a></li>  
    <li><a href="#Beispiel">Seite&nbsp;8</a></li>  
    <li><a href="#Beispiel">Seite&nbsp;9</a><div></div></li>  
  </ul>  
  
  <ul id="Navigation">  
    <li><span>Bezeichnung3</span></li>  
    <li><a href="#Beispiel">Seite&nbsp;10</a></li>  
    <li><a href="#Beispiel">Seite&nbsp;11</a></li>  
    <li><a href="#Beispiel">Seite&nbsp;12</a></li>  
    <li><a href="#Beispiel">Seite&nbsp;13</a><div></div></li>  
  </ul>  
  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln