Jojo: background-color bei a:hover im IE

Hallöchen zusammen
Mein kleiner Freund der IE (Nummero 6 auf Win2000) hat da so ein Problem: Er weigert sich meinem Link eine Hintergrundfarbe zu geben. Leider verstehe ich seine Aversion gegen diese Farbe nicht ganz.

Das Ganze sieht so aus:

#navi_l a {
display: block;
padding: 0 10px;
color: #fff;
font: bold 0.9em Arial;
}

#navi_l a:hover {
background-color: #aac;
color: #000;
}

Der Link selbst steckt in einer Liste, die wiederum in einem div steht, falls das Relevanz hat.

(Und falls das alles nur ein dummer kleiner Fehler ist: Habt Erbarmen. Es ist Montag Morgen und die Kaffeemaschine ist kaputtt. <.<)

  1. Hello out there!

    #navi_l a {
    display: block;
    padding: 0 10px;
    color: #fff;
    font: bold 0.9em Arial;
    }

    Warnung: keine Hintergrundfarbe gesetzt.

    Der Link selbst steckt in einer Liste, die wiederum in einem div steht, falls das Relevanz hat.

    Wahrscheinlich hat das Markup Relevanz. Oder auch andere Regeln des Stylesheets. Ich kann dein Problem anhand deiner spärlichen Angaben jedenfalls nicht nachvollziehen.

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    1. #navi_l a {

      display: block;
      padding: 0 10px;
      color: #fff;
      font: bold 0.9em Arial;
      }

      
      >   
      > Warnung: keine Hintergrundfarbe gesetzt.  
        
      Ob ich da nun eine Hintergrundfarbe setze oder nicht scheint weder die Browser noch meine Validator zu interessieren. Aber ich habe standardmässig background-color:transparent für alle Elemente gesetzt.  
        
        
      
      > Wahrscheinlich hat das Markup Relevanz. Oder auch andere Regeln des Stylesheets. Ich kann dein Problem anhand deiner spärlichen Angaben jedenfalls nicht nachvollziehen.  
        
      Hier also das Markup:  
        
      ~~~html
      <body>  
      <div id="bg_oben"></div> <!-- Verlaufshintergrund -->  
      <div id="pos"> <!-- positioniert die Seite -->  
        
      <div id="head"></div> <!-- Kopf der Seite -->  
        
      <div id="navi_content"> <!-- positioniert Navi & Content -->  
      <div id="navi"> <!-- positioniert navi -->  
      <ol id="navi_l"> <!-- positioniert 1. navi-block -->  
      <li><a href="../index.html" onClick="MM_showHideLayers('navi_unternehmen','','hide','navi_service','','hide')">Home</a></li>  
      …
      

      (Ja, ich greife auf die showhidelayers-Funktion von Dreamweaver zurück weil ich selbst nicht so bewandert in javascript bin.)

      1. Hello out there!

        Warnung: keine Hintergrundfarbe gesetzt.

        Ob ich da nun eine Hintergrundfarbe setze oder nicht scheint weder die Browser […]

        Natürlich nicht: ein Bowser stellt dir die ostfriesische Nationalfahne „weißer Adler auf weißem Grund“ [Otto] dar, wenn du es so willst.

        […] noch meine Validator zu interessieren.

        Ich sagte ja auch Warnung, nicht Fehler. BTW, ein Validator sollte dir dasselbe als Warnung sagen.

        Aber ich habe standardmässig background-color:transparent für alle Elemente gesetzt.

        Das ist standardmäßig auch ohne dein Zutun so. [CSS2 §14.2.1]

        Eben deshalb gilt ja für '#navi_l a': 'color: #fff' und 'background-color: transparent'. Weißer Adler auf weißem Grund.

        Ich kann dein Problem anhand deiner spärlichen Angaben jedenfalls nicht nachvollziehen.

        Hier also das Markup:

        Immer noch nicht. Beim Hovern wird der vorher unsichtbare (s.o.) Link sichtbar: Vorder- und Hintergrundfarbe werden gesetzt.

        Du verschweigst immer noch Relevantes.

        Ja, ich greife auf die showhidelayers-Funktion von Dreamweaver zurück

        Ähm, die was tun?

        Gunnar

        --
        „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
        1. Holadrio

          Ich sagte ja auch Warnung, nicht Fehler. BTW, ein Validator sollte dir dasselbe als Warnung sagen.

          Nope.

          Das ist standardmäßig auch ohne dein Zutun so. [CSS2 §14.2.1]

          Eben deshalb gilt ja für '#navi_l a': 'color: #fff' und 'background-color: transparent'. Weißer Adler auf weißem Grund.

          Nicht ganz. Die Navigation selbst hat einen Hintergrund -> weißer Adler auf buntem Grund.

          Ich kann dein Problem anhand deiner spärlichen Angaben jedenfalls nicht nachvollziehen.
          Immer noch nicht. Beim Hovern wird der vorher unsichtbare (s.o.) Link sichtbar: Vorder- und Hintergrundfarbe werden gesetzt.
          Du verschweigst immer noch Relevantes.

          Du klingst als würde ich das absichtlich machen. Aber wenn du drauf bestehst, hier also der CSS-code des Links und aller Elternelemente.

            
          body {  
          background: url(bilder/bg_bottom.png) #005 top left repeat;  
          font: 0.8em Arial;  
          color: #000;  
          }  
            
          a:link, a:visited, a:hover, a:active {  
          text-decoration: none;  
          color: #459;  
          font-weight: bold;  
          }  
            
          a:link, a:visited:hover {  
          color: #236;  
          }  
            
          #bg_oben {  
          position: fixed;  
          left: 0;  
          top: 0;  
          display: table-cell;  
          width: 100%;  
          height: 768px;  
          background: fixed url(bilder/bg.png) repeat-x;  
          }  
            
            
          #pos {  
          position: absolute;  
          left: 50%;  
          top: 40px;  
          margin-left: -465px;  
          width: 1000px;  
          }  
            
          #navi_content {  
          float: left;  
          height: 100%;  
          width: 850px;  
          background: url(bilder/bg_navi.png) 201px 0px repeat-y;  
          }  
            
           #navi {  
           float:left;  
           width: 280px;  
           height: 540px;  
           background: url(bilder/navi.png) no-repeat;  
           }  
            
            #navi_l {  
            width: 130px;  
            height: 114px;  
            padding: 8px 0;  
            background-color: #459;  
            text-align: right;  
            }  
            
            
             * html #navi_l {  
             padding: 0;  
             height: 130px;  
             margin-top: 15px;  
             }  
            
            #navi_l li{  
            list-style-type: none;  
            margin-top: 10px;  
            }  
            
            #navi_l a {  
            display: block;  
            padding: 0 10px;  
            color: #fff;  
            font: bold 0.9em Arial;  
            }  
            
             * html #navi_l a {  
             line-height: 0;  
             }  
            
            #navi_l a:hover{  
            background-color: #aac;  
            color: #000;  
            }

          Nach einigem rumprobieren hab ich rausgefunden, dass der IE sich ganz im Allgemeinen weigert, dem Link eine Hintergrundfarbe zu geben, solange er auf display:block steht.

          Ja, ich greife auf die showhidelayers-Funktion von Dreamweaver zurück

          Ähm, die was tun?

          Eine Ebene verstecken oder einblenden.

          1. Hallo,

            * html #navi_l a {
               line-height: 0;
               }

            Wofür soll das gut sein?

            Nach einigem rumprobieren hab ich rausgefunden, dass der IE sich ganz im Allgemeinen weigert, dem Link eine Hintergrundfarbe zu geben, solange er auf display:block steht.

            Nein, solange dafür eine Zeilenhöhe von 0 definiert ist.

            viele Grüße

            Axel

          2. Hello out there!

            Ich sagte ja auch Warnung, nicht Fehler. BTW, ein Validator sollte dir dasselbe als Warnung sagen.

            Nope.

            Der W3C CSS Validierungsdienst tut das.

            Eben deshalb gilt ja für '#navi_l a': 'color: #fff' und 'background-color: transparent'. Weißer Adler auf weißem Grund.

            Nicht ganz. Die Navigation selbst hat einen Hintergrund -> weißer Adler auf buntem Grund.

            Bunt?? Du meinst eine Hintergrundgrafik? Hast du auch den Fall gedacht, wenn deine Hintergrundgrafik nicht angezeigt wird? Es mag wichtig sein, zusätzlich auch eine Hintergrundfarbe anzugeben.

            Äh nein, du meinst nicht bunt, sondern farbig: '#459'.

            In deinem Fall gilt die Hintergrundfarbe von '#navi_l' auch für '#navi_l a', also OK. (Im ursprünglichen Testszenario gab es diese Angabe aber nicht, also weißer HIntergrund.)

            Du verschweigst immer noch Relevantes.

            Du klingst als würde ich das absichtlich machen.

            Ach was.

            Aber wenn du drauf bestehst, hier also der CSS-code des Links und aller Elternelemente.

            Ach was, ich bestehe nicht drauf, dir dein Problem zu lösen. ;-) Aber zur Lösung war das schon erforderlich.

            Nach einigem rumprobieren hab ich rausgefunden, dass der IE sich ganz im Allgemeinen weigert, dem Link eine Hintergrundfarbe zu geben, solange er auf display:block steht.

            Nope.

            Dein Problem ist nicht '#navi_l a {display: block}', sondern '* html #navi_l a {line-height: 0}'. Wo keine Höhe, da kein Hintergrund.

            Was soll diese Regel eigentlich?

            See ya up the road,
            Gunnar

            --
            „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
            1. Du klingst als würde ich das absichtlich machen.
              Ach was.

              Ich lass mir hier keine Bösartigkeiten unterstellen. *schmoll

              Dein Problem ist nicht '#navi_l a {display: block}', sondern '* html #navi_l a {line-height: 0}'. Wo keine Höhe, da kein Hintergrund.

              Was soll diese Regel eigentlich?

              Verhindern, dass der IE mir die li-Elemente auseinanderschiebt wo er es nicht soll. Und ja, ich frage mich auch gerade, warum ich die Anweisung dann nicht für li eingetragen habe. Dann klappt das mit der Hintergrundfarbe auch wieder.

              Erm.. trotzdem Danke. ;)