Affichage différent suivant le navigateur

**[ced]** · 16/06/2008, 09h54

Bonjour,

Je dispose du code HTML suivant :

Code :

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

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 :

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

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

**TwAzO** · 16/06/2008, 10h31

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é @+

**[ced]** · 16/06/2008, 10h49

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 :

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

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 :

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

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;
}

**Er3van** · 16/06/2008, 11h04

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.

Affichage différent suivant le navigateur

CSS

Discussions similaires

Partager

Partager