Encadrements d'images par CSS, problèmes de compatibilité navigateurs

Bonjour,

Je ne maitrise que très mal les css et j'essaie en vain d'obtenir un effet de bordure à des images avec changement de couleur. Le problème est que mon code ne marche pas sous Internet Explorer. J'ai tenté de faire des modifications mais suivant les possibilité que j'utilise soit ça marche sous IE mais pas Firefox soit l'inverse.

Voici le lien de la page où je fais les tests :

http://www.gite-ferme-jura.fr/ferme_tests_css.htm

Et la feuille du style :

http://www.gite-ferme-jura.fr/style_tests_css.css

Je vous copie le code de la partie de la page où j'ai testé mon effet :

<a href="images/ferme/montbeliardes_1-g.jpg" rel="lightbox[ferme]" title="Nos vaches Montb&eacute;liardes" class="lien_image_g"><img src="images/ferme/montbeliardes_1.jpg" alt="Nos vaches Montb&eacute;liardes" title="Nos vaches Montb&eacute;liardes" ></a>
    	<p style="text-align:center">Nos vaches Montb&eacute;liardes</p>
    	<p>&nbsp;</p>
    	<a href="images/ferme/montbeliardes_2-g.jpg" rel="lightbox[ferme]" title="Nos vaches Montb&eacute;liardes"><img src="images/ferme/montbeliardes_2.jpg" alt="Nos vaches Montb&eacute;liardes" title="Nos vaches Montb&eacute;liardes" class="image_g"></a>
    	<p style="text-align:center">Nos vaches Montb&eacute;liardes</p>
    	<p>&nbsp;</p>
        <a href="images/ferme/montbeliardes_ete-g.jpg" rel="lightbox[ferme]" title="Les vaches en p&agrave;turage" class="image_g"><img src="images/ferme/montbeliardes_ete.jpg" alt="Les vaches en p&agrave;turage" title="Les vaches en p&agrave;turage" class="image_g"></a>
    	<p style="text-align:center">Les vaches en p&agrave;turage</p>
    	<p>&nbsp;</p>
        <a href="images/ferme/chevres-g.jpg" rel="lightbox[ferme]" title="Nos ch&egrave;vres"><img src="images/ferme/chevres.jpg" alt="Nos ch&egrave;vres" title="Nos ch&egrave;vres" class="image_g"></a>
    	<p style="text-align:center">Nos ch&egrave;vres</p>

Et la partie du code de la feuille CSS :

.image_g
{
    border: 1px solid #666666;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 3px;
    margin-left: 10px;
    background-color: #FFFFFF;
    padding-top: 2px;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
}

.image_g:hover
{
    border: 1px solid #333333;
	margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 3px;
    margin-left: 10px;
    background-color: #996600;
    padding-top: 2px;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
}


a.lien_image_g
{
    border: 1px solid #666666;
    margin-top: 10px;
    margin-right: 3px;
    margin-bottom: 10px;
    margin-left: 3px;
    background-color: #FFFFFF;
    padding-top: 2px;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
}

a.lien_image_g:hover
{
    border: 1px solid #333333;
	margin-top: 10px;
    margin-right: 3px;
    margin-bottom: 10px;
    margin-left: 3px;
    background-color: #996600;
    padding-top: 2px;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
}

Modifié par Mamat (08 Jan 2009 - 23:49)

Bonjour,

Ce code CSS est à priori fonctionnel. Par contre, il est très mal optimisé. Tu dois avoir 50 lignes de code là où 10 suffiraient sans doute, voire moins!

Deux pistes pour l'optimisation de ce code CSS:
- utiliser les propriétés margin et padding (et pas toutes leurs déclinaisons);
- ne pas répéter dans élément:hover {...} ce que l'on a déjà mis en forme dans élément {...}, c'est inutile.

La seule chose qui peut poser problème à Internet Explorer dans ce code (et je parle là uniquement de Papy IE6, pas d'IE7 et IE8), c'est l'utilisation de la pseudo-classe :hover pour des images. Cette pseudo-classe n'est comprise par IE6 que lorsqu'elle s'applique aux liens (éléments A). C'est le cas dans la deuxième partie de ton code, qui devrait donc être compris correctement.

De manière générale, si tu veux pouvoir régler tes problèmes, il serait bon de:
1. s'assurer que la page HTML est valide (si elle n'a pas de Doctype, par exemple, je te renvois aussi sec à tes cours de base sur HTML/XHTML!);
2. s'assurer que le code CSS est valide;
3. optimiser le code CSS pour qu'il soit au moins lisible.

Bonjour,

Effectivement le code n'était pas vraiment optimisé.
J'ai modifié la CSS.
J'ai validé la page et le CSS au W3C.

Mais mon problème subsiste. As tu observé le problème dans Firefox ?

Sur Firefox les effets au survol ont l'air de fonctionner. En même temps je ne sais pas exactement ce que tu veux...

Par contre, ce qui ne fonctionne pas, c'est l'encadrement des images par les liens. Ça vient du fait que les liens sont des éléments de type en-ligne, et qu'ils ne viennent pas englober l'image comme le ferait un élément de type bloc.

Il faudrait éventuellement passer les liens en display: inline-block (pas tous les liens de la page, bien sûr). Ou bien jouer sur les styles des images uniquement pour l'affichage des bordures.

Nickel ça marche avec le display:inline-block.

Des heures de prise de tête résolues en 3 mots.

Merci beaucoup Florent !