Discussion :

[alex830001]

Bonjour,

J'ai un probléme d'alignement des boutons de navigation de mon forum (www.solveurs.com) sous firefox.

Sous IE cela fonctionne, les boutons sont alignés et séparés alors que sous firefox ils sont tous sur la meme ligne ms entassés les un sur les autres.

le code de ma feuille de style pour les boutons est celui çi:

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
18
19
20
21
22
23
24
#menu {height:1%; font-family:Arial; font-size:0.75em; padding-bottom:15px;}
#menu .ind {padding:0 0 0 0px; margin-left:25px; margin-top:-44px; float:left; width:120px; height:40px; background-image:url(images/bfaq.png); background-repeat:no-repeat;}
#menu .ind:hover { background-image:url(images/bfaqh.png); background-repeat:no-repeat;}
#menu .ind1 {padding:0 0 0 0px; margin-left:25px; margin-top:-44px; float:left; width:120px; height:40px; background-image:url(images/bins.png); background-repeat:no-repeat;}
#menu .ind1:hover { background-image:url(images/binsh.png); background-repeat:no-repeat;}
#menu .ind2 {padding:0 0 0 0px; margin-left:25px; margin-top:-44px; float:left; width:120px; height:40px; background-image:url(images/baccueil.png); background-repeat:no-repeat;}
#menu .ind2:hover { background-image:url(images/baccueilh.png); background-repeat:no-repeat;}
#menu .ind3 {padding:0 0 0 0px; margin-left:25px; margin-top:-44px; float:left; width:120px; height:40px; background-image:url(images/bcompte.png); background-repeat:no-repeat;}
#menu .ind3:hover { background-image:url(images/bcompteh.png); background-repeat:no-repeat;}
#menu .ind4 {padding:0 0 0 0px; margin-left:25px; margin-top:-44px; float:left; width:120px; height:40px; background-image:url(images/bmes.png); background-repeat:no-repeat;}
#menu .ind4:hover { background-image:url(images/bmesh.png); background-repeat:no-repeat;}
#menu .ind5 {padding:0 0 0 0px; margin-left:25px; margin-top:-44px; float:left; width:120px; height:40px; background-image:url(images/bcon.png); background-repeat:no-repeat;}
#menu .ind5:hover { background-image:url(images/bconh.png); background-repeat:no-repeat;}
#menu .ind6 {padding:0 0 0 0px; margin-left:25px; margin-top:-44px; float:left; width:120px; height:40px; background-image:url(images/bdeco.png); background-repeat:no-repeat;}
#menu .ind6:hover { background-image:url(images/bdecoh.png); background-repeat:no-repeat;}
 
 
 
 
#menu ul{margin:0px; padding:0px; list-style:none}
#menu ul li { line-height:1em; float:left; margin-right:5px; padding:0 0 15px 0}
#menu ul li a{text-decoration:none; color:#2d2c2c; background:url('./images/menu_bg.gif') no-repeat 0 0; padding:15px 0 15px 0; text-align:center; display:block; width:95px}
#menu ul li a.hover {background:url('./images/menu_hover_bg.gif') no-repeat 0 0; color:#fff}
#menu ul li a:hover{ text-decoration:none; background:url('./images/menu_hover_bg.gif') no-repeat 0 0; color:#fff}

J'espere que quelqu'un saura comment je peux corriger la marge gauche pour que les boutons s'affichent correctement sous les deux navigateurs.

Merci pour votre aide.

[alex830001]

Y a t'il un moyen de spécifier une margin-left pour IE et une autre pour firefox dans la CSS?

Si je régle les marges d'un explorateur internet ça décale les icones de l'autre...

[Erwan31]

Bonjour,
ton problème vient des marges haute négatives de -44px.

Comme le précise C-s-s, tu dois factoriser un peu tout ça pour gagner au final quelques ko sur ta CSS et faciliter les éventuelles mises à jour:

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
18
19
20
21
#menu .ind, #menu .ind1, #menu .ind2, #menu .ind3, #menu .ind4, #menu .ind5, #menu .ind6 {
	float:left; 
	width:120px; 
	height:40px; 
	margin-left:25px; 
	background-repeat: no-repeat;
	}
#menu .ind {background-image:url(bfaq0000.png);}
	#menu .ind:hover {background-image:url(bfaqh000.png);}
#menu .ind1 {background-image:url(bins0000.png);}
	#menu .ind1:hover {background-image:url(binsh000.png);}
#menu .ind2 {background-image:url(baccueil.png);}
	#menu .ind2:hover {background-image:url(baccueim.png);}
#menu .ind3 {background-image:url(bcompte0.png);}
	#menu .ind3:hover {background-image:url(bcompteh.png);}
#menu .ind4 {background-image:url(bmes0000.png);}
	#menu .ind4:hover {background-image:url(bmesh000.png);}
#menu .ind5 {background-image:url(bcon0000.png);}
	#menu .ind5:hover {background-image:url(bconh000.png);}
#menu .ind6 {background-image:url(bdeco000.png);}
	#menu .ind6:hover {background-image:url(bdecoh00.png);}

[alex830001]

merci j'ai appliqué ton format, je remonte le bloque de façon à ce que les boutons soit dans la banniere, je ne vois pas comment faire autrement qu'appliquer une marge haute négative à tout le bloc.

Je n'arrive plus à décoller les annonces google par contre. J'ai esssayé de rajouté un margin-bottom au menu mais ça fonctionne sous FF mais sur IE rien ne se passe.

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
18
19
20
21
22
#menu .ind, #menu .ind1, #menu .ind2, #menu .ind3, #menu .ind4, #menu .ind5, #menu .ind6 {
	float:left; 
	width:120px; 
	height:40px; 
	margin-left:25px;
	margin-top: -30px;
	background-repeat: no-repeat;
	}
#menu .ind {background-image:url(images/bfaq.png);}
	#menu .ind:hover {background-image:url(images/bfaqh.png);}
#menu .ind1 {background-image:url(images/bins.png);}
	#menu .ind1:hover {background-image:url(images/binsh.png);}
#menu .ind2 {background-image:url(images/baccueil.png);}
	#menu .ind2:hover {background-image:url(images/baccueilh.png);}
#menu .ind3 {background-image:url(images/bcompte.png);}
	#menu .ind3:hover {background-image:url(images/bcompteh.png);}
#menu .ind4 {background-image:url(images/bmes.png);}
	#menu .ind4:hover {background-image:url(images/bmesh.png);}
#menu .ind5 {background-image:url(images/bcon.png);}
	#menu .ind5:hover {background-image:url(images/bconh.png);}
#menu .ind6 {background-image:url(images/bdeco.png);}
	#menu .ind6:hover {background-image:url(images/bdecoh.png);}

[alex830001]

c'est bon j'ai reussi à régler le probleme

J'ai juste ajouté un <br> sur la page html pour décoller les annonces.

Merci pour l'aide sur la CSS

[Erwan31]

c'est bon j'ai reussi à régler le probleme
J'ai juste ajouté un <br> sur la page html pour décoller les annonces.

Les br (break) ne sont pas fait pour ajouter des espaces verticaux mais uniquement pour forcer une coupure de ligne.

[Deallyra]

Bonsoir,

J'ajouterai, par rapport à ton premier message (ou le second je ne sais plus exactement) qu'il est possible de spécifier un comportement css différent pour IE et FF.

Pour cela, tu peux utiliser les commentaires conditionnels.

[c_s_s]

Bonjour,

Pour commencer, tu devrais factoriser un peu tes styles car tu répètes inutilement certaines propriétés qui sont communes à tous tes liens du menu.

A mon avis, le problème vient mois de la marge gauche que de la marge haute négative que tu mets sur tes liens.
Si tu veux remonter tes liens, je te conseille plutôt d'agir sur le bloc #menu, plutôt que sur chaque lien.