Version complète: sur le forum Webmaster Hub : probleme sous firefox avec une image !
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
yorkknew
vendredi 5 septembre 2008 à 19:28
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 :

CODE
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 !
Dadou
vendredi 5 septembre 2008 à 20:16
manque d'infos : la css seule ne suffit pas, et le HTML qui va avec?
yorkknew
vendredi 5 septembre 2008 à 20:23
ok ! voici le HTML :

CODE
<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
vendredi 5 septembre 2008 à 21:31
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
vendredi 5 septembre 2008 à 22:00
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:

CODE
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
samedi 6 septembre 2008 à 00:06
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

wink.gif
yorkknew
samedi 6 septembre 2008 à 06:22
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 ! wink.gif

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 !
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.