✔ IE - Button background image wiederholt sich & Button verrutscht

[Gast170816]

Hallo,

ich habe eine w3c-valide Navigation mit einer Image-Replacement-Technik gebastelt. In IE siehts aber trotzdem fehlerhaft aus, bzw. ist überhaupt nicht klickbar:

- Der Button ist halt da und gleich unten wiederholt er sich nochmal, allerdings nur für ca. 10 Pixel

- Außerdem sind alle Buttons (unten das ist nur mal das Codebeispiel für einen Einzelnen) überhaupt nicht "hover- & klickbar".

  ul#casemenu li  {
display : block;
float : left;
font-size : 1.5em;
line-height : 1em;
list-style-type : none;
margin : 0 0 10px 0;
padding : 0;
height : 50px;
width : 160px;
}
.mir {
letter-spacing : -1000em;
}
html > body .mir {
letter-spacing : normal;
text-indent : -999em;
overflow : hidden;
}
ul#casemenu li#p103 {
background-color : transparent;
background-image : url(../imgnav/case_all.jpg);
width : 160px;
} 


ul#casemenu li#p103act {
          background-color: transparent;
          background-image: url(../imgnav/case_all_a.jpg);
          width: 160px;
  }

ul#casemenu li a,
ul#casemenu li strong {
    background: transparent;
    color: #8c6a34;
    display: block;
    text-decoration: none;
   padding: 20px 5px;
    width: auto;
  }

  /* CaseSeite "A" */
ul#casemenu li#p103 a:focus,
ul#casemenu li#p103 a:hover,
ul#casemenu li#p103 a:active  {
    background: transparent;
    background-image: url(../imgnav/case_all_a.jpg);
    color: #fff;
    text-decoration: none;
  }

Ich habe ja oben "margin" mal für unten 10px gegeben, aber nur weil ich wollte, dass die Buttons alle einen kleinen Abstand haben. Oder müsst ich das wo anders machen
Wie geht diese "Bildwiederholung" weg?
(hatte schonmal was mit "no-repeat left top" bzw. nur "no-repeat" probiert, aber da war die Grafik schließlich ganz weg.)
(PS: Die Grafik selbst ist tatsächlich 160 x 50 px groß)

Im Code weiter unten, das sind die weiteren Anweisungen, die für den Hover-Bildaustausch sorgen und dafür, dass das Hover-Bild nach dem Klicken fest stehen bleibt. ABER: Hover und Klicken funktionieren im IE (6) gar nicht.

 

[Maik]

Hi,

erweiter mal hier die Regel folgendermaßen, damit das Hintergrundbild vom IE6 nicht wiederholt wird:

ul#casemenu li  {
display : block;
float : left;
font-size : 1.5em;
line-height : 1em;
list-style-type : none;
margin : 0 0 10px 0;
padding : 0;
height : 50px;
width : 160px;
overflow:hidden;
}

Dass im IE6 das Hintergrundbild nicht getauscht wird, liegt daran, dass im "Normalzustand" das Hintergrundbild für das li-Element, und beim Hovern für das a-Element definiert ist.

Lösung:

ul#casemenu li#p103 a {
background-color : transparent;
background-image : url(../imgnav/case_all.jpg);
width : 160px;
}

Ansonsten lassen sich bei mir die "Buttons" im IE ganz normal anklicken.

mfg Maik

 

[Gast170816]

Ja, jetzt funktionierts! Toll!!