Probleme de z-index et margin sur firefoxRésolu/Fermé

Question

Bonjour, J'ai deux petits soucis, Le premier étant que je n'arrive pas a faire fonctionner le z-index que ce soit sur ie ou firefox. Mes éléments ne se superposent pas... Le second étant que les marges sur ie sont deux fois plus petites que sur firefox. A ce propos il me semblait qu'un simple display:inline reglait le problème, et c'est en effet le cas sur ie ma marge revient bien correctement mais mon élément disparait sous firefox. Voici ma css : body { background-color:#000000; margin-bottom: 0px; font-family: Verdana; font-size: 10px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #000000; text-align:center; } div#fond { height:698px; width:1024px; padding-top:22px; background-image:url(../images/fond.jpg); background-repeat:no-repeat; } a#diapoEmpty { background:transparent url(../images/diapoEmpty.png) no-repeat scroll 0pt; background-repeat:no-repeat; border:medium none; cursor:pointer; display:block; height:131px; width:124px; z-index:1; } a#diapoAn2006 { background:transparent url(../images/diapoAn2006unhover.png) no-repeat scroll 0pt; background-repeat:no-repeat; border:medium none; cursor:pointer; display:block; height:131px; width:124px; display:inline; margin-top:50px; z-index:2; } et mon code html :

Merci d'avance !

s.spark · Answer

Salut,

"Le premier étant que je n'arrive pas a faire fonctionner le z-index que ce soit sur ie ou firefox. Mes éléments ne se superposent pas... "

Là j'ai du mal à t'aider étant donné que je n'ai pas tes images pour tester. Tu n'aurais plutôt un lien vers cette page ou vers les images? Et ton code est incomplet, il ni à que ce qu'il y a dans body.


"Le second étant que les marges sur ie sont deux fois plus petites que sur firefox. A ce propos il me semblait qu'un simple display:inline reglait le problème, et c'est en effet le cas sur ie ma marge revient bien correctement mais mon élément disparait sous firefox. "

Si tu as des problèmes de marge le mieux est de tout simplement les mettres à 0 ou de les choisir toi même (margin et padding).

		background:transparent url(../images/diapoEmpty.png) no-repeat scroll 0pt;
		background-repeat:no-repeat;

La 2ème lien de sert à rien, c'est du boublon

Que signifie  scroll 0pt ?

		border:medium none;
Je ne comprend pas bien ce que ça veux dire ? Avec l'attribut none on enlève la bordure, alors à quoi sert le medium ?

a#diapoAn2006 {
		background:transparent url(../images/diapoAn2006unhover.png) no-repeat scroll 0pt;
		background-repeat:no-repeat;
		border:medium none;
		cursor:pointer;
		display:block;
		height:131px;
		width:124px;
		display:inline;
		margin-top:50px;
		z-index:2;
		}

Tu cumule display:block; et display:inline;, le 2ème est inutile, ou les deux.

s.spark · Answer

"Si tu as des problèmes de marge le mieux est de tout simplement les mettres à 0 ou de les choisir toi même (margin et padding)."



Le problème c'est que j'ai besoin que les marges rendent la meme choses sur ie que sur firefox or ce n'est pas le cas...


J'ai bien dis "ou de les choisir toi même (margin et padding)."

Pour le problème de z-index je ne vois pas, rien ne se superpose.

Unicorn777 · Answer

A moins que je ne comprenne pas ce que tu veuilles dire pour "choisir moi meme" le padding/margin... mais mon soucis c'est que si je met par exemple padding: 7px 6px 50px 9px ca ne rendra pas la meme chose sur firefox que sur ie... l'idée à terme c'est que des diapo se superposent (grace au z-index si j'arrive à le faire fonctionner)  mais vu que le margin/padding ne rend pas pareil sur ie que sur firefox ca risque de ne se chevaucher que sur l'un des deux.

s.spark · Answer

Ba si, les pixel sont les même partout. Par contre la valeur par défaut des balises n'est pas la même entre Firefox et IE.

z-index permet de choisir qu'est-ce qui sera au dessus de quoi, si tu superposes toute les photos on en verra plus qu'une, quelque soir le z-index.

Unicorn777 · Answer

Je t'invite a installer/utiliser firebug et IE developper toolbar et de tester sur mon site et tu verras que ce n'est pas le cas pour les marges (oui ca m'as etonné aussi, mais apparement c'est un problème très connu qu'on retrouve un peu partout sur les fofo de dev web).

Pour le z-index oui c'est bien ce que je veux faire.. en gros elle se chevaucheront partiellement.. mais ce ne fonctionne pas.
Je voudrais faire un truc dans ce genre la :

http://www.groupeforum.net/imprim/img/groupe_forum/visite/visite_guidee(espcom)_diapo.jpg

s.spark · Answer

Déjà fais les se chevocher, pour ça utilise l'attribut  position absolute pour les mettre ou tu veux, pour les mettre biais par contre le CSS ne te seras d'aucun secoure le pense.

Unicorn777 · Answer

Oh, merci beaucoup ca à l'air de bien fonctionner correctement le z-index avec position:absolute !!!
Par contre sur ie mes elements restent centrées sur ma page, alors que sur firefox ils se sont alignés sur la gauche. Il y a quelque chose pour palier a ce probleme?

Merci beaucoup en tout cas, ça fait deja un bon probleme de reglé !

Je regarderais pour les marges demain ce que ca donne maintenant que ca c'est reglé et je te tiens au courant.

edit:en fait je me suis repenché dessus de suite... en remplaçant le display:block par un display:inline et avec le position absolute tout va mieux.. les marges sont ok tous les elements retent centrés sur ma page et les z-index fonctionnent bien !

Un grand merci à toi! A bientot !

Probleme de z-index et margin sur firefox

7 réponses

Discussions similaires

Newsletters