Discussion :

[koudji]

Bonjour,

Je vous écris pour vous faire part d'un problème de différente d'affichage entre Explorer et Firefox que j'ai rencontré récemment lié au CSS. Je vous présente le script et ensuite vous parle du dit problème.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
a: {color: #CBA300;}
a:link		{ color: #CBA300; display: block; text-decoration: none;}
a:visited 	{ color: #CBA300; display: block; text-decoration: none;}
a:hover		{
	color: #ffffff;
	background-color: #565553;
	text-decoration: none;
	display: block;
	width: 116px;
	height: 18px;
}
.c12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
</style>

Cette feuille de styles est utilisée pour un menu de navigation verticale, placé dans un tableau, et dont chaque lien est dans une cellule.

Avec Explorer :
- Le survol des liens en une seule ligne (sans retour <br>) fait remonter le texte d'un pixel.
- Le survol des liens en 2 lignes (avec un retour <br>) s'effectue correctement.


Avec Firefox :
- La couleur du lien dans l'état hover (survol) ne devient pas blanc (#FFFFFF) mais reste jaune moutarde (#CBA300) comme l'état link.
- Le survol des liens en une seule ligne (sans retour <br>) fait remonter le texte d'un pixel.
- Lors du survol des liens en 2 lignes (avec retour <br>), le block d'arrière-plan (#565553) ne s'affiche que sur la première ligne. Plus grave encore, la hauteur de la cellule diminue comme si tout ce qui se trouve après le saut de ligne (<br>) n'existait pas.


Il vous est possible de voir directement le résultat à cette adresse

Merci à ceux qui répondront.

[Candygirl]

Hello,

tes problèmes viennent en grande partie de là:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
a:hover		{
	color: #ffffff;
	background-color: #565553;
	text-decoration: none;
	display: block;
	width: 116px;
	height: 18px;
}

Il faut que tu vires la hauteur. Vu que tu la laisses libre pour le a, celui-ci s'adapte au contenu et pour le hover, tu lui en imposes une. Normal que lors du hover sur 2 lignes ils deviennet tout petit; sur 18px, pas vraiment la place pour 2 lignes

Pour la couleur du hover, sur le lien que tu donnes, la couleur passe bien au blanc il me semble?

[koudji]

Merci pour ton judicieux commentaire. J'ai retiré la ligne concernant la hauteur et, effectivement, tout semble aller pour un mieux. J'en ai profité pour mettre les marges et le padding à 0. J'ai mis le lien à jour.

Pour ce qui est du texte en blanc sous Firefox, il est toujours en jaune-moutarde. La version installée chez moi est la 1.0.7. Voici un lien vers une page complète comportant le menu.

[Bisûnûrs]

Erreur : Identifiant pour pseudo-classe ou pseudo-élément attendu, mais « » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur.
Fichier source : http://www.jmndesign.be/merhliale/css/menu.css
Ligne : 11
_________________________________________
Erreur : Identifiant pour pseudo-classe ou pseudo-élément attendu, mais « » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur.
Fichier source : http://www.jmndesign.be/merhliale/menu/menu.htm
Ligne : 9
_________________________________________
Erreur : document.text has no properties
Fichier source : http://www.jmndesign.be/merhliale/js/descriptif.js
Ligne : 30

Seulement sur le lien du menu.

Sinon la couleur passe bien au blanc sur Firefox chez moi aussi.

[koudji]

merci à tous les deux d'avoir pris la peine de me répondre si rapidement. Le problème d'affichage est résolu. Il me reste maintenant à me plonger sur un autre problème : "Comment faire passer une infobulle au-dessus (au niveau des plans) d'un <div> ?"

Si vous avez regardé attentivement la page de toute à l'heure, les liens figurant dans les cadres "Objets intéressants" disposent d'infobules. Pour donner cet effet de débordement des images depuis leurs cadres, j'ai fais appel à un <div>. Certaines infobules étant assez grandes, elles descendent jusqu'au <div> de l'image suivante. Dans ces cas-là, j'aimerais que l'infobule soit au premier plan par rapport au <div>.

A moins que l'un de vous deux ne connaisse la réponse, je vais poster cette question dans une rubrique plus adéquate dans ce forum.

[Bisûnûrs]

les liens figurant dans les cadres "Objets intéressants" disposent d'infobules.

Pas chez moi.

Enfin pas sur Firefox quoi.

[Candygirl]

Si vous avez regardé attentivement la page de toute à l'heure

Moi j'ai regardé attentivement surtout le contenu puisque j'en était resté au down de Lucifron quand j'ai arrêté wow il y a plus d'un an. Ton site est une vrai tentation à retourner en mode nolife pour moi

Autrement pas d'infobull non plus sur Seamonkey, normalement c'est la propriétét z-index qui devrait t'aider pour ce genre de cas.

[koudji]

J'ai posté un message fort similaire sur le forum JavaScript. Je n'ai, pour le moment, parlé que du fait que le script ne s'affiche pas sur Firefox mais bien sur Explorer.

Pour Candygirl : Une fois corrigé au niveau du JavaScript et complété au point de vue de l'information, ce site sera visible à l'adresse www.merhliale.be dont j'ai déjà réservé le nom de domaine.

Je cloture ici ce post. Merci à tous.