[IE] Transparantie van een UL

[Verwijderd]

Luitjes,

Ik heb het volgende stukje CSS code. Ik probeer de list-items van een UL transparant te krijgen.

In Firefox werkt dit prima, maar IE pikt dit niet. Als ik de transparantie toepas op de UL zelf werkt het wel, maar dat is de gehele UL transparant, wat ik niet wil. Alleen het list-item moet transparant worden en onder een :hover volledig zichtbaar worden.

Iemand enig idee wat ik fout doe?

code:

#menu ul
{
    margin: 0px;
    text-align: center;
    list-style: none;
}

#menu ul li
{
    display: inline;
    padding: 0px 2px;
}

#menu ul li a
{
    text-decoration: none;
    font-weight: bold;
    background: #fff;
    padding: 7px 10px 7px 11px;
    border: solid 1px #999;
    color: #666;

    opacity: .5;
    filter: alpha(opacity = 50);
}

#menu ul li a:hover
{
    z-index: 100;

    opacity: 1;
    filter: alpha(opacity = 100);
}

[Copyman]

De anchors in de list-items hebben geen hasLayout. HasLayout kan met behulp van een aantal css-properties worden getriggerd, deze kom je tegen in de URL die ik net gaf. In jouw geval zou je de anchor display:inline-block; of height:1%; kunnen geven om het op te lossen.

[Borizz]

Het lijkt me beter om het met een reële height te bewerkstelligen, zodat het ook in andere browsers er nog goed uitziet:

Cascading Stylesheet:

#menu ul li a {
    height: 1em;
}

inline-block wordt ook niet ondersteund in firefox 2.

[ Voor 13% gewijzigd door Borizz op 26-12-2008 14:09 ]

[Copyman]

Firefox 2 heeft hem ook niet nodig.

offtopic:
Verder niet van toepassing, maar daar kan je display: -moz-inline-box; voor gebruiken.

[ Voor 11% gewijzigd door Copyman op 26-12-2008 14:20 ]

[Verwijderd]

Mijn dank is groot.

Echter, de height: 1% werkt niet, de display: block-inline wel.