probleme sous firefox avec une image !

[yorkknew]

Bonsoir à tous !!!

Alors voici un problème peu commun, en effet tout est parfait sous IE et pas sous FF (c'est le monde à l'envers hein !)

alors voici ce que cela donne sous FF :

et voici ce que cela donne sous IE et ce que je voudrais avoir :

Voilà !

Ah oui voici mon code CSS de l'image :

input.border{
	margin-right:-4px;
	margin-bottom:4px;
	height:15px !important;
	height:19px;
	border:1px solid red;
}

/*
input.valider{
	background-image:url('img/search_btn.gif');
	background-repeat:no-repeat;
	border:0px solid blue;
	cursor:pointer;
}

input.valider2{
	background-image:url('img/news_btn.gif');
	background-repeat:no-repeat;
	height:19px;
	width:19px;
	border:0px solid blue;
	cursor:pointer;
}

*/
.input_, .input_2 {
	float:left;
	text-align:center;
	padding-top:7px;
	width:217px;
	height:27px !important;	
	height:34px;
}

.input_{
	margin:0 auto;
}

.input_2{
	margin-left:55px !important;
	margin-left:30px;
}

form.form{
	height:19px;
	width:164px;
	margin:0 auto;
}

Merci beaucoup pour votre aide et de me lire !

Modifié 5 Septembre 2008 par yorkknew

[Dadou]

manque d'infos : la css seule ne suffit pas, et le HTML qui va avec?

[yorkknew]

ok ! voici le HTML :

<form class="form" action="site" method="get" name="search"><input class="border" name="mot" value="search for a store" id="mot" onfocus="java script:this.value=''" type="text" /><input class="valider" src="img/search_btn.gif" name="recherche" id="recherche" value="search" type="image" /></form>

[lorem_ipsum]

Salut,

j'ai une petite question, utilises tu ff 3?

Si c'est le cas essaye de faire le test avec le 2 car depuis que j'ai installé le 3 je me suis rendu compte qu'il n'était pas fiable a 100% niveau xhtml/css!!

Je viens de terminer une intégration rien de plus simple, valide xhtml strict et css2 site testé sur tous les navigateur! et le seul a me provoquer un bug est = "firefox 3" huhuhhu!

Il me pond une bande de 2 pixel vide entre mon header et mon contain! alors que mon code est rien de plus simple ( 2 div l'un en dessous de l'autre -.- )

Bref je ferme la parenthèse! mais essaye le test sur 2 puis sur 3 .

++

[zimounet]

Des mois et des mois que je ne suis pas venu ici... mais ce soirs j'me suis dis "et si je retournais forummer quelque part?"...

Bref!

Pour ton problème:

- Pourquoi mets tu une id et une class sur tes éléments?

En l'occurrence je te suggère d'utiliser pour ce cas ci les id en référence dans ta CSS.

- Peux-tu clarifier le CSS que tu nous donnes? Si j'ai suivie le truc, seul ceci est valable pour ton probleme:

input.border{
	margin-right:-4px;
	margin-bottom:4px;
	height:15px !important;
	height:19px;
	border:1px solid red;
}


form.form{
	height:19px;
	width:164px;
	margin:0 auto;
}

?

-

[crocxx]

Franchement il faut arrête avec les hack en CSS (!important,...).

Créer ton site avec une feuille de style qui fonctionne bien sous les navigateur respectant les standard (pour un bon pannel Firefox, Opera et Safari), ensuite tu créer un feuille de style de correction que tu applique avec les commentaire conditionnels pour chaque version d'IE.

Plusieurs avantage:

- Pas besoin de trouver un hack qui marche avec tel ou tel version d'IE

- La feuille de style est plus propre

- C'est plus facile a rendre compatible partout

[yorkknew]

alors une petite réponse rapide : sous FF 2 sous windows ca a l'air de marcher très bien. Mais que faire au niveau de FF 3 ?

Merci Crocxx pour tes conseils !

ET simounet ba tout le code CSS est correct apparement ca viendrait de FF 3 mais que faire ? Attendre une mise à jour ?

Merci à vous ! Bonne journée !