[html/css] Warum zeigt IE Navigation nicht an

[Luckie]

Habe gerade in der Mittagspause etwas an meiner Homepage gemacht (Es hat mich mal wieder überkommen, nach dem ich was gesehen habe, was mir ganz gut gefallen hat.).

Bitte mal angucken: http://www.michael-puff.de

Mit dem Firefox ist die Navigation im Header sichtbar, mit dem IE8 aber nicht.

CSS:

Code:

body {
  font-family: Verdana, Arial, Sans-Serif;
  font-size: 90%;
  background-color: white;
}

h1, h2, h3, h4, h5 {
  margin-top: 20px;
  margin-bottom: 0px;
}

.header {
   background:url("/data/header.png") repeat-x scroll 0 0 transparent;
   border:1px solid #6E6E6E;
   height:150px;
   margin-top: -15px;
   margin-left: -10px;
   margin-right: -8px;
   margin-bottom:25px;
}

.navigation {
   font:bold 11px Verdana;
   list-style-type:none;
   margin-top:-68px;
   overflow:hidden;
   padding-bottom:5px;
   width:90%;
}

.navigation li {
   display:inline;
}

.navigation li a {
   background:none repeat scroll 0 0 #626464;
   border-right:1px solid #CACACA;
   color:#CACACA;
   display:block;
   float:left;
   padding:7px 8px;
   text-decoration:none;
}

Seite:

Code:

         <div class="header">
         <center>
            <h1>Homepage von Michael Puff</h1>
               [size="1"]
                  Homepage zu den Themen Programmierung hauptsächlich mit Delphi


                  Delphi Tutorials, Freeware und opensoure Programme, Win32API Tutorials


                  Offizieller Mirror des Delphi Encryption Compendium (DEC) von Hagen Reddmann
               [/size]
         </center>
         </div>
         <div class="navigation">
            <ul>
               <li class="navigation">[url="/"]Home[/url]
               <li class="navigation">[url="/Ablage"]Ablage[/url]
               <li class="navigation">[url="/Artikel"]Artikel[/url]
               <li class="navigation">[url="/Ausbildung_FIAE"]Ausbildung FIAE[/url]
               <li class="navigation">[url="/Developer"]Developer[/url]
               <li class="navigation">[url="/Latex"]Latex[/url]
               <li class="navigation">[url="/Links"]Links[/url]
               <li class="navigation">[url="/Programme"]Programme[/url]
            [/list]         </div>

Ich weiß schon, warum ich eigentlich so was nicht machen.

[fkerber]

Hi!

Kann es sein, dass das </div> in Zeile 10 falsch ist? (Zumindest suggeriert deine Einrückung das)


Grüße, Frederic

[nahpets]

Hallo,

wegen des Schreibfehlers in opensoure=

Nein, deshalb bestimmt nicht, IE6 mag's aber auch nicht. Laut http://jigsaw.w3.org/css-validator/#validate_by_input ist das Stylesheet aber okay.

Aber der http://validator.w3.org/ ist mit Deiner HTML-Seite nicht zufrieden, er bemängelt 14 Fehler und hat noch 5 Warnungen parat. Eventuell gibt es dort ja einen Zusammenhang.

[Matze]

Das hängt vermutlich damit zusammen, dass du negative Margin-Angaben nutzt. Diese sollte man immer vermeiden. Für dich wird es mehr als unübersichtlich und er IE interpretiert da manches nicht ganz so, wie man es sich wünscht.

Das ist meine Vermutung.

[Luckie]

Und wie bekomme ich das ohne negative margin Werte ausgerichtet?

Die Fehler kommen vom DirectoryListing des Apache.

[mirage228]

Der IE8 wechselt bei der Seite in der Quirksmodus. Stellst Du den Modus über die Entwicklerwerkzeuge (unter Extras) manuell auf "IE8-Standards" ist die Navigation wie gewollt da. Weiterhin siehst Du über die Entwicklerzeuge, dass im Quirksmodus die Navigation viel zu weit oben ist und wohl von einem anderen Element verdeckt wird.

Viele Grüße

[Luckie]

Und wie behebe ich das?

[Matze]

Das Problem ist das:

Du gibst sowohl einem <div> als auch einem[*] die CSS-Klasse "navigation". Ein <div> hat aber bsp. die Eigenschaft "list-style-type" nicht. Ändere es so ab:

Code:

<div class="navigation">
   <ul>
      [*][url="http://www.michael-puff.de/"]Home[/url]
      [*][url="http://www.michael-puff.de/Ablage"]Ablage[/url]
      [*][url="http://www.michael-puff.de/Artikel"]Artikel[/url]
      <li >[url="http://www.michael-puff.de/Ausbildung_FIAE"]Ausbildung FIAE[/url]
      [*][url="http://www.michael-puff.de/Developer"]Developer[/url]
      [*][url="http://www.michael-puff.de/Latex"]Latex[/url]
      [*][url="http://www.michael-puff.de/Links"]Links[/url]
      [*][url="http://www.michael-puff.de/Programme"]Programme[/url]
   [/list]</div>

Code:

.navigation {
   font:bold 11px Verdana;
   overflow:hidden;
   padding-bottom:5px;
   width:90%;
   margin-top: -68px;
}

.navigation li {
   list-style-type:none;
   float: left;
}

".navigation li" gibt an, dass es für alle[*] innerhalb der Klasse "navigation" gilt.

Grüße, Matze

[Luckie]

Ah, bestens. Jetzt wird sie angezeigt. Zwar nicht ganz da, wo sie sein sollte. Aber das kann ich verschmerzen.