Navigationleiste im Explorer

magifix · 23 Januar 2012

Hallo,

habe eine Navigationsleiste die im Explorer anders angezeigt wird als im Firefox
a) Untermenu ist nich rechts verschoben
b) Die Felder des Untermenues sind anders unterlegt
kann mir jemand bitte sagen wo ich was ändern muss?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;
      charset=ISO-8859-1">
    <title>Dynamisch Navigationsleisten einblenden</title>
    <style type="text/css">


div#Rahmen {
    font-family: arial, sans-serif;
    font-size: 12px;
    #margin-bottom: 1px;

    width: 604px;
    padding: 0px;
    height: 31px;
    border-right: 1px solid black;
    background-color: silver;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 150px;
    w\idth: 150px;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;

    vertical-align: middle;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;

    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;

    margin: 0px; padding: 0px;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: 0px;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: 0px;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 32px;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: 0px;
    lef\t: 0px;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom: 0px;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;

        margin-top: 2px;

    border-right: 1px solid black;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 150px;  /* Breite den in li enthaltenen Elementen zuweisen */
    height: 30px;
    padding: 0px;
    font-size: 12px;
    color: #f8f8f8;
    text-decoration: none; 
    line-height: 30px;
    font-weight: bold;
    border: 1px solid black;
        border-right: 0px;
    background-color: #cccccc;
    vertical-align: 50%;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 0px;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 0px;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {

    border-left-color: black; border-top-color: black;
    color: #101010; 
    background-color: #bbbbff;

  }



</style>
  </head>
  <body>
  <center>

    <div id="Rahmen">
      <ul id="Navigation">
        <li><a href="#Beispiel">Bilder 2009</a>
          <ul>
            <li><a href="#Beispiel">Seite 1a</a></li>
            <li><a href="#Beispiel">Seite 1b</a></li>
          </ul>
        </li>
        <li><a href="#Beispiel">Bilder 2010</a>
          <ul>
            <li><a href="#Beispiel">Seite 2a</a></li>
            <li><a href="#Beispiel">Seite 2b</a></li>
          </ul>
        </li>
        <li><a href="#Beispiel">Bilder 2011</a>
          <ul>
            <li><a href="#Beispiel">Seite 3a</a></li>
            <li><a href="#Beispiel">Seite 3b</a></li>
          </ul>
        </li>
        <li><a href="#Beispiel">Bilder 2012</a>
          <ul>
            <li><a href="#Beispiel">Seite 4a</a></li>
            <li><a href="#Beispiel">Seite 4b</a></li>
            <li><a href="#Beispiel">Seite 4c</a></li>
          </ul>
        </li>
      </ul>
      <div></div>
    </div>
    <p><br>
    </p>
  </body>
</html>

Wustersoss · 23 Januar 2012

Wo du was ändern musst, weiss ich nicht und ist auch zu mühsam, daher habe ich dir das mal neu erstellt:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dynamisch Navigationsleisten einblenden</title>

<style type="text/css">
ul#Navigation { height:32px;width:32.1em; margin:0 auto; background:rgb(192,192,192); list-style:none;padding:0;font-family: arial, sans-serif; font-size: 12px;}
ul#Navigation li,ul#Navigation li a {margin:0;float:left;display:block;height:30px; width:8em;text-align:center;line-height:30px;text-decoration:none;color:white;background:rgb(192,192,192);}
ul#Navigation li a {border:1px solid black;background:rgb(192,192,192);}
ul#Navigation li a:hover{background-color:rgb(0,0,0)}
ul#Navigation li ul {display:none;list-style:none;margin-left:0;padding:0;}
ul#Navigation li:hover ul  {display:block;}
</style>

  </head>
  
  <body>
      <ul id="Navigation">
        <li><a href="#Beispiel">Bilder 2009</a>
          <ul>
            <li><a href="#Beispiel">Seite 1a</a></li>
            <li><a href="#Beispiel">Seite 1b</a></li>
          </ul>
        </li>
        <li><a href="#Beispiel">Bilder 2010</a>
          <ul>
            <li><a href="#Beispiel">Seite 2a</a></li>
            <li><a href="#Beispiel">Seite 2b</a></li>
          </ul>
        </li>
        <li><a href="#Beispiel">Bilder 2011</a>
          <ul>
            <li><a href="#Beispiel">Seite 3a</a></li>
            <li><a href="#Beispiel">Seite 3b</a></li>
          </ul>
        </li>
        <li><a href="#Beispiel">Bilder 2012</a>
          <ul>
            <li><a href="#Beispiel">Seite 4a</a></li>
            <li><a href="#Beispiel">Seite 4b</a></li>
            <li><a href="#Beispiel">Seite 4c</a></li>
          </ul>
        </li>
      </ul>
      
  </body>
</html>

Getestet in modernen Browsern und IE ab Version 7.

Navigationleiste im Explorer

magifix

Neues Mitglied

Wustersoss

Guest

Neueste Beiträge