Problème de CSS : Filter:alpha et lien sur du jpg

[Angus]

Bonsoir,

Je suis en train de faire un menu simple avec quatres images. Comme mon site est en anglais et français, je n'ai aps voulu m'embêter avec des images survolées dans les deux langues, donc j'ai opté pour le filter:alpha pour que lorsque je survole une des images du menu, cette dernière devient plus clair.

Le truc c'est que ça fonctionne très bien sous FireFox mais pas IE7. Je précise que mes images sont en jpg (si ça a sont importance). Voici mon bout de CSS :

.img {
border: none;
filter:alpha(opacity=100);
}
.img:hover{
filter:alpha(opacity=74);
min-height : 1%;
opacity: 0.84;
border: none;
}
.img img {
   border:none;
   }

Je crois savoir que FireFox utilise plutôt l'attribut opacity alors que IE utilise le filter:alpha. Peut être que le problème vient de "img:hover" qui n'est pas codé comme il faut. Enfin là j'avoue que je sèche

[Dudu]

Salut

Je ne travaille pas avec Windows (et donc je ne peux pas tester IE 7) donc ma réponse se fait en fontion de ce que j'ai lu par-ci par-là, je ne peux rien affirmer.

Mais il me semble qu'Explorer ne fait fonctionner ses filtres alpha qu'avec les éléments pour lesquels sont définis une largeur et/ou une hauteur.

La seule exception étant les <input> qui ont une valeur par défaut.

C'est en tous cas ce que je me suis laissé dire sur le site du Microsoft Deleveloper Network:

http://msdn2.microsoft.com/en-us/library/ms532847.aspx

Almost any object can have filters applied to it. However, the object that the filter is applied to must have layout before the filter effect will display. Put simply, having layout means that an object has a defined height and width. Some objects, like form controls, have layout by default.

Donc en résumé:

- spécifie les largeur et hauteur de tes images

- n'oublie pas que filter(alpha) est une règle propriétaire Microsoft et qu'elle n'est pas valide w3c (faute de grives on mange des merles, je sais)

[Angus]

Merci pour l'info Dudu. Le seul problème c'est que mes images n'ont pas toutes les mêmes hauteurs et largeurs...

J'ai essayé avec :

height: auto;

Mais ça n'a pas fontionné. Peut être est-ce le fait que je n'ai pas préciser la largeur en même temps. Je vais tester ça.

Edit : même chose

Voici mon code actuel :

.img {
border: none;
filter:alpha(opacity=100);
}
.img:hover{
filter:alpha(opacity=74);
min-height : 1%;
height: auto;
width: auto;
opacity: 0.84;
border: none;
}
	.img img {
   border:none;
   }

Modifié 29 Juillet 2007 par Angus

[Dudu]

height: auto je ne connais pas, mais ça ne me semble pas conforme à vue d'oeil.

Fais l'essai sur une seule image et tu seras fixé

Sinon, devant le retard d'Explorer je suis partisan du "tant que ça reste lisible, c'est bon". C'est-à-dire que je soigne mon design pour Explorer comme pour les autres navigateurs. Mais les petits détails cosmétiques qui ne veulent pas fonctionner dans Explorer, du moment qu'ils n'empêchent pas la bonne accessibilité, je zappe.

Car je me vois mal perdre des heures de travail (et des octets supplémentaires sur mon serveur) pour gérer un navigateur en retard de 5 ans.

Ensuite cela dépend si tu souhaites avoir la même logique. Et aussi si ton problème est un détail cosmétique, ou pas.

[Angus]

Et bien ça fonctionne. La chose qui me gêne c'est que je vais être obliger d'en faire un pour chaques images

En fait pour répondre à ta remarque (qui au passage n'est pas mauvaise), oui je suis tout de même obligé de garder ce détail cosmétique. Bien que obligé soit un bien grand mot, j'y tiens

Merci pour l'aide Dudu.

Bonne fin de soirée

[Dudu]

Alors si tu y tiens ...

Au fait, as tu spécifié les largeur et hauteur directement dans le code HTML ? Si oui, et si Explorer veut bien les prendre en compte pour ses filtres, ça t'éviterait de tout redéfinir plusieurs fois. En effet, tu conserverais ainsi le même code CSS que celui que tu as posté ci-dessus.

En revanche, un truc me titille: pourquoi une class .img ? Je ne sais pas quel est ton code HTML mais en théorie, tu devrais pouvoir te passer d'une class redondante et juste jouer sur les sélecteurs enfants. D'ailleurs, tu spécifies deux fois (donc une fois de trop) l'absence de bordure sur les images

[Angus]

Alors si tu y tiens ...

Au fait, as tu spécifié les largeur et hauteur directement dans le code HTML ? Si oui, et si Explorer veut bien les prendre en compte pour ses filtres, ça t'éviterait de tout redéfinir plusieurs fois. En effet, tu conserverais ainsi le même code CSS que celui que tu as posté ci-dessus.

En revanche, un truc me titille: pourquoi une class .img ? Je ne sais pas quel est ton code HTML mais en théorie, tu devrais pouvoir te passer d'une class redondante et juste jouer sur les sélecteurs enfants. D'ailleurs, tu spécifies deux fois (donc une fois de trop) l'absence de bordure sur les images

Merci pour l'astuce

En fait ça y est, tout fonctionne. Finalement lorsque je retirai les attributs height et width de ma feuille de style, ça ne fonctionnait plus sous IE même en spécifiant la taille des images dans mon code.

J'ai résolu le problème en mettant 1% à height et width pour qu'il y ait une valeur sans pour autant me créer un décalage lorsque je passais sur une image avec des dimensions différentes.