Affichage différent suivant le navigateur

Version imprimable

Bonjour,

Je dispose du code HTML suivant :
Code:

1 2 3 4 5 6 7 <body> <br/> <br/> <div id="titre_page"> Titre <a class="image_titre" href="#"></a> </div> </body>
et du CSS suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 #titre_page{ line-height:34px; background-color : blue; color : white; } #titre_page a.image_titre{ margin-top:-34px; float:right; width:34px; height:34px; background-image: url('http://www.fpmusique.ch/accordeon.gif/pigini/formulaire/flecheBasNoire.gif'); background-repeat : no-repeat; }
Ce code doit m'afficher sur une ligne :
- un titre
- une image cliquable sur la droite de la page.

Le code fonctionne correctement sous Firefox et IE.

Par contre sour Opera et Firefox, je dois enlever (margin-top:-34px;) pour que mon image s'affiche sur la ligne.

Quelle est la solution pour obtenir le même affichage sur l'ensemble des navigateurs.

Merci

16/06/2008, 10h31
TwAzO

Je ne m'y connais pas encore beaucoup mais je ne pense pas que ca soit possible en css.

Par contre en javascript je sais qu'il est possible de tester le navigateur, donc tu pourrais très bien faire 2 css et utiliser celui qui est adapté en fonction du navigateur de l'utilisateur.

En espérant t'avoir avancé @+

J'arrive à un résultat correct en sortant la balise <a> de mon div et en supprimant le code margin-top:-34px; de mon css

HTML :

Code:

1
2
3
4
5
6
7
<body>
<br/>
<br/>
<a class="image_titre" href="#"></a>
<div id="titre_page"> Titre
</div>
</body>

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
#titre_page{
	line-height:34px;
	background-color : blue;
	color : white;
}
 
a.image_titre{
	float:right;
	width:34px;
	height:34px;
	background-image: url('http://www.fpmusique.ch/accordeon.gif/pigini/formulaire/flecheBasNoire.gif');
	background-repeat : no-repeat;
}

16/06/2008, 11h04
Er3van

Tu peux utiliser les commentaires conditionnels pour spécifier l'application d'une feuille de style css à tel ou tel navigateur.

Mais dans ton cas tu dois pouvoir t'en passer.

Pourquoi as-tu besoin d'un margin-top ? Tu essaies de centrer ton titre avec ton image ?
Si c'est le cas, tu peux utiliser une table et jouer avec le vertical-align, sinon margin-top est une solution. Mais il te faudra surement appliquer "display : block; " à ton lien.