Positionnement élément // incompatibilité ie et firefox

Bonjour à tous,

j'ai un petit souçis d'incompatibilité dans le positionnement d'éléments sous internet explorer 8 et firefox 3 :

sous firefox : les éléments sont parfaitement placés, tandis que sous ie, les éléments sont décalés de quelques pixels vers le bas, voici un aperçu ecran :

FIREFOX ok :




http://img269.imageshack.us/img269/5457/17388663.th.jpg


IE non ok :

http://img32.imageshack.us/img32/259/41797891.th.jpg

mon code css :

span.wpcf7-not-valid-tip {
	position: absolute;
	top: 1%;
	left: 1%;
	margin-top: -2px;
	z-index: 100;
	font-size: 10pt;
	color:#f00;
	width: 200px;
	height: 20px;
	padding: 0px;	

}

merci de me dire comment puis-je résoudre ce problème de positionnement, j'ai testé pas mal de chose trouvé sur le forum, mais sans succès...

Bonne journée
Modifié par sofiane06 (18 Aug 2010 - 11:27)

Hello

Un peu plus de code serait pas de refus, par exemple le html de ton formulaire, et quelques bouts du reste du css parce que là ton span.wpcf7-not-valid-tip on a un peu aucune idée à quoi il correspond.

question : le parent ou l'élément dans lequel se trouve ton span.wpcf7-not-valid-tip est-il en position fixed ou relative ?

Bonjour saiko_sama
le parent est en position relative...

Je travaille sous un wordpress, le formulaire est contact form 7

span.wpcf7-not-valid-tip correspond au champ obligatoire à remplir de ce formulaire (en rouge dans mes copies écrans)

Dès que l'on appuie sur le bouton envoyer du formulaire en oubliant certains champs.
les champs obligatoires apparaissent en rouge et doivent être positionnées sous iexplorer comme sous firefox mais ça ne le fait pas

en code html, je ne sais pas quoi trop te mettre car, c'est un plug in wordpress, qui fait appel a sa propre feuille de style.css.

donc les modifications de positionnement se font directement sur le style.css de contact form 7...

je te mets le code css du formulaire :

div.wpcf7 {
	margin: 0;
	padding: 0;
}

div.wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
}

div.wpcf7-mail-sent-ok {
	border: 2px solid #398f14;
}

div.wpcf7-mail-sent-ng {
	border: 2px solid #ff0000;
}

div.wpcf7-spam-blocked {
	border: 2px solid #ffa500;
}

div.wpcf7-validation-errors {
	border: 2px solid #f7e700;
}

span.wpcf7-form-control-wrap {
	position: relative;
}

span.wpcf7-not-valid-tip {
	position: absolute;
	top: 1%;
	left: 1%;
	margin-top: -2px;
	z-index: 100;
	font-size: 10pt;
	color:#f00;
	width: 200px;
	height: 20px;
	padding: 0px;	

}

span.wpcf7-not-valid-tip-no-ajax {
	color: #f00;
	font-size: 10pt;
	display: block;
}

span.wpcf7-list-item {
	margin-left: 0.5em;
}

.wpcf7-display-none {
	display: none;
}

div.wpcf7 img.ajax-loader {
	border: none;
	vertical-align: middle;
	margin-left: 4px;
}

c'est bon j'ai trouver le problème, j'ai juste mis la balise left à 0 px et jj'ai enlever le margin-top négatif

span.wpcf7-not-valid-tip {
	position: absolute;
	left: 2px;
	z-index: 100;
	font-size: 10pt;
	color:#f00;
	width: 200px;
	height: 20px;
	padding: 0px;	

}

voilà [lol]