28172 sujets

CSS et mise en forme, CSS3

Problème bordure/soulignement lien

Bonjour,

J'ai un petit problème...
J'ai un site qui fonctionne parfaitement sur Chrome mais sur Firefox et IE, j'ai des problème de liens.

Je m'explique :
J'ai un tableau avec une class attribuée à une colonne pour lui ajouter une bordure qui change couleur au passage de la souris. Ce cadre (en "off" comme en rollover) ne s'affiche ni sur Firefox ni sur IE.
J'ai aussi des liens textes qui sont sensés être soulignés au mouseover mais qui selon sur Firefox et IE disfonctionnent (Firefox : liens visités soulignés tout le temps en violet et en bleu au mouseover, IE : liens soulignés tout le temps en violet).

Il doit y avoir conflit avec mon css...
Pour vous aider, un bout de code :

HTML :
<table width="100%" border="0" cellspacing="5" cellpadding="0">
      <tr>
        <td width="14%" height="94"  align="center" bordercolor="#666666" style=" border-width:thin;" class="vignetteRep" >
        <a href="reportage_01.html"><img src="images/femmes_thumbs/photo002.jpg" width="95" height="63"></a></td>
       <td width="34%"><font class="titreGalerie"><font class="font5">Reportage</font><br /> <a href="reportage_01.html"><font class="font6">Reportage 1</font></a></font></td>
       <td width="14%" align="center" bordercolor="#666666" style=" border-width:thin" class="vignetteRep"><a href="reportage_02.html"><img src="images/rep02th.jpg" width="63" height="95" /></a></td>
        <td width="36%"><font class="titreGalerie"><font class="font5">Reportage</font><br /><a href="reportage_02.html"><font class="font6">Reportage 2</font></a></font></td>
      </tr>
</table>


CSS :
body{margin-top: 0px; background-image:url('images/filigrane.png'); background-position:center; background-repeat:no-repeat;}
a:link{text-decoration:none;}
a:hover{ text-decoration:underline;}
a:visited{text-decoration:underline;}
a img{ border:0 none;}
img{border:0 none;}
a:focus{outline:0;}

.font5{color:#8b8b8b; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 10px; font-weight:100; font-style:italic;}
.font6{font-size:11px; text-transform:uppercase; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#92a449;}

.vignetteRep{border-color:#66666; }
.vignetteRep:hover{border-color:#92a449;}


Je crois savoir qu'on peut demander à ce que plusieurs attributs css s'appliquent selon le navigateur détecté mais je ne sais pas comment m'y prendre et à force d'avoir le nez dedans je m'y perds...
Quelqu'un aurait une idée...? Smiley ohwell

Merci...
Modifié par ekoo (18 Mar 2011 - 11:02)
Bonjour,

je me suis penché rapidement sur votre problème.

Tout d'abord, il faut savoir que le td:hover ne fonctionne pas sous IE6 [edit:précision ie6 et erreur concernant FF], il faudra donc, très malheureusement, remplacer cela par du Javascript ( onMouseOver et onMouseOut ) pour ce navigateur afin de changer la valeur du border-color " à la volée ".

On aurait pu essayer de mettre le " a " en "display:block; height:100%; width:100%;" dans les td .vignetteRep puis mettre les bordures sur le a, mais cela ne fonctionne pas dans votre cas, car vous avez des images dedans et cela entraine qu'elles ne seront plus centrées verticalement dans votre td.

Pour le problème des liens, cela vient du fait que vous avez une balise "font" qui entoure le contenu de votre lien. Le "underline" prend la couleur de votre lien, mais vous avez placé la couleur du texte à l’intérieur sur votre balise "font", il suffit de retirer cette balise et de placer la classe qui y était associée directement sur votre lien.

je vous donne ce que j'ai pu faire rapidement, je pense que le rendu est ce que vous attendiez ( testé sur IE 6, FF4 et Chrome 10, je n'ai pas d'autres navigateurs sous la main... )

	<table width="100%" border="0" cellspacing="5" cellpadding="0"> 
      <tr> 
        <td width="14%" height="94"  align="center" onMouseOver="this.style.borderColor='#92a449';" onMouseOut="this.style.borderColor='#666666';" class="vignetteRep" > 
        <a href="reportage_01.html"><img src="images/femmes_thumbs/photo002.jpg" width="95" height="63"></a></td> 
       <td width="34%">
			<font class="titreGalerie">
				<font class="font5">Reportage</font>
				<br /> 
				<a class="font6" href="reportage_01.html">
					Reportage 1
				</a>
			</font>
		</td> 
       <td width="14%" align="center" onMouseOver="this.style.borderColor='#92a449';" onMouseOut="this.style.borderColor='#666666';" class="vignetteRep">
			<a href="reportage_02.html"><img src="images/rep02th.jpg" width="63" height="95" />
			</a>
		</td> 
        <td width="36%">
			<font class="titreGalerie">
				<font class="font5">Reportage</font>
				<br />
					<a  class="font6" href="reportage_02.html">
					Reportage 2
				</a>
			</font>
		</td> 
      </tr> 
</table>



	body{margin-top: 0px; background-image:url('images/filigrane.png'); background-position:center; background-repeat:no-repeat;} 
a:link{text-decoration:none;} 
a:hover{ text-decoration:underline;} 
a:visited{text-decoration:underline;} 
a img{ border:0 none;} 
img{border:0 none;} 
a:focus{outline:0;} 
 
.font5{color:#8b8b8b; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 10px; font-weight:100; font-style:italic;} 
.font6{font-size:11px; text-transform:uppercase; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#92a449;} 
 
.vignetteRep { border: thin solid #666666;  } 
.vignetteRep:hover { border-color: #92a449; }



PS : il est fort dommage que vous utilisiez des tableaux pour mettre en forme un bout de code comme celui-ci, et il y a quelques optimisations possibles, mais la question n'était pas là, traitons un seul problème à la fois.

En espérant vous avoir aidé.
Modifié par n3k0 (18 Mar 2011 - 15:44)
Je viens de tester ce que vous m'avez dit mais il y a toujours des problèmes...

Sur Chrome, maintenant, les bordures ne s'affichent plus...
Sur Firefox, liens visités tout le temps soulignés mais dans la bonne couleur (à la limite, ça ne pose pas trop trop de problème si vraiment je ne peux pas..)
Sur IE, liens soulignés tout le temps (toujours la bonne couleur)...

A la limite, ça me pose moins de problème si les liens visités ou non soient soulignés tout le temps (du moment que c'est bien dans la couleur de mon texte).
Le problème surtout c'est que maintenant il n'y a plus de bordures, même sous Chrome...

Savez-vous pourquoi ?

Merci de votre aide...

Peut-être devrais-je utiliser des div plutôt qu'un tableau ?
ekoo a écrit :

Sur Firefox, liens visités tout le temps soulignés mais dans la bonne couleur (à la limite, ça ne pose pas trop trop de problème si vraiment je ne peux pas..)
Sur IE, liens soulignés tout le temps (toujours la bonne couleur)...

A la limite, ça me pose moins de problème si les liens visités ou non soient soulignés tout le temps (du moment que c'est bien dans la couleur de mon texte).

Pour les liens visités soulignés, cela vient de votre CSS initiale :
a:visited{text-decoration:underline;}

Et comme vous avez surement visité tous vos liens avec IE, ils sont tous soulignés.


Si ce n'est pas ce que vous voulez, essayez de le remplacer par :
a:visited{text-decoration:none;}

Il vous faudra par contre placer cette ligne avant celle contenant le a:hover, IE6 ne mettant pas la priorité sur le a:hover, il vous faut placer ce code avant, sinon vous perdrez vos :hover.




ekoo a écrit :

Sur Chrome, maintenant, les bordures ne s'affichent plus...
{...}
Le problème surtout c'est que maintenant il n'y a plus de bordures, même sous Chrome...

Savez-vous pourquoi ?

Cela me semble bizarre, j'ai, sur tous les navigateurs que j'ai cité, les bordures actives, et qui changent de couleur au rollover... auriez-vous désactivé le javascript ?
C'est tout bon pour les liens : comment aurais-je pu deviner qu'il fallait placer le a:visited avant le a:hover...

Mais pour les bordures ça ne marche pas pas non... depuis que j'ai corrigé avec le javascript ça ne marche plus sur Chrom et toujours pas sur Frx et IE...
Modifié par ekoo (18 Mar 2011 - 13:38)
Le javascript ne sert qu'au rollover, il faut bien garder la ligne
.vignetteRep { border: thin solid #666666;  }

dans votre css
Modérateur
Bonjour,

ekoo a écrit :
comment aurais-je pu deviner qu'il fallait placer le a:visited avant le a:hover...


Pour se rappeler de l'ordre, le mot clé est LoVe/HAte pour a:link, a:visited, a:hover, a:active.

ou encore LoVe For HAte pour a:link, a:visited, a:focus, a:hover, a:active.
n3k0 a écrit :
Tout d'abord, il faut savoir que le td:hover ne fonctionne pas sous IE et mal sous Firefox

Ah bon? D'après un test rapide ça marche sans souci particulier sous Firefox.
Sous IE je m'attends à ce que ça marche très bien sous IE 8 et 9, et sans doute correctement aussi sur IE 7.

n3k0 a écrit :
il faudra donc, très malheureusement, remplacer cela par du Javascript

Non.

Plus généralement, ce serait quand même plus simple de travailler avec un code HTML propre. Ici on a des attributs de mise en forme (align="center"), des éléments de mise en forme (FONT) qui portent des classes pour définir des styles CSS, et enfin des styles CSS dans des attributs style.
On doit pouvoir faire un tableau simple, sans le moindre attribut ou élément de mise en forme, avec juste une classe ou un identifiant sur l'élément TABLE, et ensuite tout peut se gérer dans la feuille de styles.

Bien sûr si le tableau sert à faire de la mise en page... mieux vaudrait utiliser du CSS pour ça aussi. Smiley cligne

Pour finir, la déclaration a:focus{outline:0;} empêche complètement l'utilisation du clavier pour naviguer dans la page, ce qui est tout de même dommage. À éviter.
Modifié par fvsch (18 Mar 2011 - 15:27)
J'ai mis ça car sinon il y a des cadres autour des images...
Je pense aussi que mon code n'est pas assez "clean", en html comme en css... c'est peut-être pour cela que j'ai ce problème de liens/bordures...

Je pourrais remplacer ce tableau par des div...? Ca pourra régler des problèmes non ?
fvsch a écrit :

Ah bon? D'après un test rapide ça marche sans souci particulier sous Firefox.


je viens de re-tester avec un td.vignetteRep:hover et cela fonctionne, il semblerait qu'il faille appliquer la pseudo classe à un élément et non à une classe... je ne pensais pas, erreur de ma part.

Pour le td:hover non pris en charge je parlais IE6, je n'ai pas les autres IE sous la main... mais je ne l'ai pas précisé à ce moment, en effet, je vais éditer mon post pour ne pas induire en erreur si quelqu'un passe dans le coin.
ekoo a écrit :
Je pense aussi que mon code n'est pas assez "clean", en html comme en css... c'est peut-être pour cela que j'ai ce problème de liens/bordures...

Ce n'est pas nécessairement ça le problème, mais disons qu'un code propre permet de savoir plus facilement quels sont les paramètres qui s'appliquent. Un code très fouillis est plus difficile à débuguer.
n3k0 a écrit :
je viens de re-tester avec un td.vignetteRep:hover et cela fonctionne, il semblerait qu'il faille appliquer la pseudo classe à un élément et non à une classe... je ne pensais pas, erreur de ma part.

.uneClasse:hover fonctionnera aussi.
Tu avais peut-être fait une erreur dans le sélecteur (.uneClasse :hover par exemple)?

n3k0 a écrit :
Pour le td:hover non pris en charge je parlais IE6, je n'ai pas les autres IE sous la main...

EN 2011 ??? Smiley eek
Alors que IE 9 est sorti cette semaine?

Quand on dit «IE fait ceci» en parlant d'IE6, c'est comme si on disait «Firefox fait cela» en parlant de Netscape Navigator. Ce n'est pas très pertinent. Smiley cligne

Pour ma part je ne prends plus en compte IE6. Ses parts de marché en France (et plus largement en Europe) sont très faibles. Le support d'Internet Explorer 6 est aujourd'hui une prestation spécialisée.
Modifié par fvsch (18 Mar 2011 - 16:33)
J'ai essayé avec...

td.vignetteRep{border: thin solid #66666; }
td.vignetteRep:hover{border-color:#92a449;}


...mais ça ne change rien... Et, non, je n'ai pas fait de faute de frappe..
fvsch a écrit :

.uneClasse:hover fonctionnera aussi.
Tu avais peut-être fait une erreur dans le sélecteur (.uneClasse :hover par exemple)?


je viens à l'instant de re-tester avec son code sous FF4 RC 1 
.vignetteRep { border: thin solid #666666;  }
.vignetteRep:hover { border: thin solid yellow;  }


le .vignetteRep:hover n'est pas pris en compte... je ne sais pas pourquoi...

fvsch a écrit :

EN 2011 ??? Smiley eek
Alors que IE 9 est sorti cette semaine?

Arf... oui c'est un peu une honte ( j'ai modifié mon post en précisant bien IE6 et professionnellement je ne dev plus pour ie6 non plus Smiley smile ... ) ... je ne dev quasi jamais chez moi sauf pour m'amuser avec du html5 ou pour monter ( en tant qu'amateur ) un peu en testant OOCSS , du coup... je n'ouvre vraiment jamais IE chez moi et il n'est pas à jour ( et je suis sous XP donc IE9 n'est pas pour moi Smiley cligne )
Modifié par n3k0 (18 Mar 2011 - 17:35)
Chez moi ça marche™.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
    <style>
    table {margin: 50px;}
    td {padding: 10px; border: solid 5px #AAA;}
    td:hover {border-color: black;}
    .test1:hover {border-color: red;}
    td.test2:hover {border-color: purple;}
    td:nth-child(4):hover {border-color: green;}
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td class="test1">2</td>
        <td class="test2">3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </table>
  </body>
</html>


En passant, effectivement il s'agit d'un tableau de mise en page, et ce n'est pas vraiment conseillé.
J'ai essayé et ça marche oui... mais maintenant j'ai une bordure sur la colonne qui contient du texte...
Je crois que je vais appliquer ces même règles css sur des div, surtout si c'est mieux...
Modifié par ekoo (18 Mar 2011 - 19:14)
J'ai réussi ! Le seul hic : centrer verticalement mes images dans la div...
Mais tout marche (liens et bordures) sur Chrome, Firefox et IE !!!

<div id="conteneur">
    <div id="ligneVignette">
        <div class="vignetteRepI">
            <a href="reportage_01.html"><img src="images/femmes_thumbs/photo002.jpg" width="95" height="63"></a>
        </div>
        <div class="vignetteRepT">
            <font class="titreGalerie"><font class="font5">Reportage</font>
            <br /><a class="font6" href="reportage_01.html">Reportage 1</a></font>
        </div>
        <div class="vignetteRepI">
            <a href="reportage_01.html"><img src="images/rep02th.jpg" width="63" height="95"></a>
        </div>
        <div class="vignetteRepT">
            <font class="titreGalerie"><font class="font5">Reportage</font>
            <br /><a class="font6" href="reportage_01.html">Reportage 2</a></font>
        </div>
    </div>
    <div id="ligneVignette">
        <div class="vignetteRepI">
            <a href="reportage_01.html"><img src="images/femmes_thumbs/photo002.jpg" width="95" height="63"></a>
        </div>
        <div class="vignetteRepT">
            <font class="titreGalerie"><font class="font5">Reportage</font>
            <br /><a class="font6" href="reportage_01.html">Reportage 3</a></font>
        </div>
        <div class="vignetteRepI">
            <a href="reportage_01.html"><img src="images/rep02th.jpg" width="63" height="95"></a>
        </div>
        <div class="vignetteRepT">
            <font class="titreGalerie"><font class="font5">Reportage</font>
            <br /><a class="font6" href="reportage_01.html">Reportage 4</a></font>
        </div>
    </div>
</div>



#conteneur{width:727px; height:555px; background-color:#; margin-top:40px; margin-bottom:0px; margin-left:auto; margin-right:auto;}
.font5{color:#8b8b8b; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 10px; font-weight:100; font-style:italic;}
.font6{font-size:11px; text-transform:uppercase; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#92a449;}
.titreGalerie{font-size:11px; text-transform:uppercase; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#92a449;}
#ligneVignette{width:100%; height:100px; margin-bottom:10px;}
.vignetteRepI{border: solid thin #AAA; width:95px; height:95px; text-align:center; float:left; margin-right:10px;}
.vignetteRepI:hover{border-color: #92a449;}
.vignetteRepT{float:left; width:30%; height:95px; }


Merci à vous !
J'aurai du utiliser des div dès le départ, plutôt qu'un tableau...
Sujet clos
Aller à