Fabian: IE7 macht Treppe aus Navigation

Hiho!

Ich habe eine horizontale Navigationsleiste aus einer Liste gebaut. Der FF zeigt das auf wunderschön an. Nur der IE7 (IE6 habe ich nicht mehr, deswegen weiß ich es nicht, vll könnte das jemand mal testen :) ) baut eine schöne Treppe daraus.
Wie kann ich dem Abhelfen?

http://www.ka-jungs.de/test/index.htm

CSS dazu:
http://www.ka-jungs.de/test/style.css

Danke und Greetz
Fabian

  1. Hallo!

    Ich habe gerade keinen IE zur Verfügung. Kann dir deshalb nur einen kleinen Tip geben.

    IE6 habe ich nicht mehr, deswegen weiß ich es nicht, vll könnte das jemand mal testen :)

    Den kannst du nachinstallieren: http://tredosoft.com/Multiple_IE.

    ciao, ww

    --
    Schäuble:
      "Wir können alles. Außer Rechtsstaat."
  2. Nur als Hinweis: IE6 macht auch eine Treppe.
    Schau mir das gleich mal an.

  3. Es liegt an der CSS
    .menu a {
      float: left;
    }

    Wenn dieser Eintrag entfernt wird, zeigt IE alles untereinander an.

    1. Es liegt an der CSS
      .menu a {
        float: left;
      }

      Wenn dieser Eintrag entfernt wird, zeigt IE alles untereinander an.

      Hallo Paul!

      Ich glaube du hast da was falsch verstanden! Er soll es ja gerade NICHT untereinander anzeigen. Ich will ja eine horizontale Menuleiste!

      Gruß
      Fabian

  4. Also ich hab die Lösung für mein horizontale Navigationsleiste mit Liste selbst gefunden. Da ich die Seite die ich oben verlinkt habe rausnehmen werde hier nochmal der (korrekte) Code:

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <title>Test</title>
      <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="menu">
     <ul>
      <li><a href="startseite.html">Startseite</a></li>
      <li><a href="produkte.html">Produkte</a></li>
      <li><a href="ueber_uns.html">&Uuml;ber Uns</a></li>
      <li><a href="frage_und_antwort">Frage &amp; Antwort</a></li>
      <li><a href="seitenlandkarte.html">Seitenlandkarte</a></li>
      <li><a href="suchen.html">Suchen</a></li>
      <li><a href="english.html">English</a></li>
     </ul>
    </div>
    </body>
    </html>

    Und das CSS:

    .menu {
        height: 27px;
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        background-image: url(bilder/nav.jpg);
        background-repeat: repeat-x;
    }

    .menu ul {
        list-style-type: none;
    }

    .menu li {
     display:inline;
    }

    .menu a {
        float: left;
        display: block;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 38px;
        color: #666666;
    }

    .menu a:hover {
        color: #000000;
        background-image: url(bilder/nav_hov.jpg);
        background-repeat: repeat-x;
    }

    Greetz
    Fabian

    1. Hallo

      Nur zwei Anmerkungen:

      .menu {
          height: 27px;

      Was passiert, wenn neue Menüpunkte hinzukommen oder das Browserfenster so schmal ist, dass nicht alle Menüpunkte in eine Zeile passen?

      ...
      }

      .menu a {
          float: left;
          display: block;

      Eigentlich sollten die betreffenden Elemente durch die Angabe von float automatisch zu Blockelementen werden, wodurch die Angabe von display: block; obsolet würde.

      ...
      }

      Tschö, Auge

      --
      Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
      (Victor Hugo)
      <dingdong /><dingdong /><toc /><toc /><toc /><shout>Florence!</shout>
      Veranstaltungsdatenbank Vdb 0.1