CSS Datei validieren - Problem mit opacity

[skittles]

Hi ihr!

Ich hab da irgendwo mal so nen Artikel gesehen über diese Möglichkeit, Grafiken eine gewissen Transparenz zuzuordnen! Nun ist dies natürlich nicht w3v conform.
Kennt jemand eine Alternative?

Also das ganze sieht so aus!

Code: Alles auswählen

<div id="sprachen">
    <ul>
   <li><a class="opacity" href="index.html"><img src="images/de.gif" alt="Deutsch wählen" /></a></li>
   <li><a class="opacity" href="index_eng.html"><img src="images/en.gif" alt="choose englisch" /></a></li>
   <li><a class="opacity" href="index_fre.html"><img src="images/fr.gif" alt="choisir francais" /></a></li>
    </ul>
   </div>


/******************************
* Sprachen Mouse-Over Effekt *
******************************/

.opacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.opacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

Hier die Fehlermeldungen vom Validator!
Link ist auch gleich dabei, damit ihr euch was darunter vorstellen könnt. Betrifft eigentlich nur die 3 kleinen Flaggen rechts oben!


URI : http://84.114.13.186/schwarzkopf32/css/screen.css

* Zeile: 224 Kontext : .opacity img

Versuche ein Semikolon vor dem Eigenschaftsnamen zu finden. Füge es hinzu.
* Zeile: 224 Kontext : .opacity img

Die Eigenschaft progid existiert nicht : DXImageTransform
* Zeile: 224 Kontext : .opacity img

Einlese-Fehler - DXImageTransform.Microsoft.Alpha(opacity=50);
* Zeile: 225 Kontext : .opacity img

Parse error - Unrecognized : -moz-opacity: 0.5;
* Zeile: 226 Kontext : .opacity img

Parse error - Unrecognized : }
* Zeile: 229 Kontext : .opacity:hover img

Versuche ein Semikolon vor dem Eigenschaftsnamen zu finden. Füge es hinzu.
* Zeile: 229 Kontext : .opacity:hover img

Die Eigenschaft progid existiert nicht : DXImageTransform
* Zeile: 229 Kontext : .opacity:hover img

Einlese-Fehler - DXImageTransform.Microsoft.Alpha(opacity=100);
* Zeile: 230 Kontext : .opacity:hover img

Parse error - Unrecogni

[Laus]

Hallo

Die Eigenschaften filter und -moz-opacity sind laut W3C nur Pseudo-CSS-Eigenschaften und werden daher vom W3C-CSS-Validator als falsch angesehen. Auch der Parse Error resultiert daraus.
Die Eigenschaften der Filter, wie das von Dir benutzte "Alpha" ist eben eine von Microsoft entwickelte und ist vom W3C nicht in den Standard mit aufgenommen worden. Die Eigenschaft "-moz-opacity" ist ( "-moz-" wie Mozilla) von der Mozilla-Group entwickelt worden. Die Einführung dieser Eigenschaft kommt daher, dass im kommenden Standard CSS 3 die Eigenschaft opacity hinzukommt. Das funktioniert bereits mit allen Browsern, die mit den Mozilla 1.7+ Kern arbeiten.
Daraus ergibt sich die einzige Valide Möglichkeit, ältere Browser auszuschließen und eben nur opacity zu verwenden, oder ganz darauf zu verzichten. Ich würde das ganze aber nicht soo Ernst nehmen bis alle Browser damit umgehen können.

Gruß Xaver

[skittles]

Danke für deine Antwort.

Also kann ich die Website eigentlich nicht als css Valid deklarieren oder?
Ich könnte auch mit einem normalen Hover Effeckt also 2 verschiedenen Grafiken arbeiten. Aber die Zeit drängt, und 2 funktioniert es mit fast allen Browsern.

Also wie siehst du das?