Discussion :

[a-sana]

Bonjour!

J'ai utilisé ce code pour un formulaire de contact:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#msg,#msgan{
border: 1px solid #999999;
padding: 4px;
margin-bottom:5px;
width:359px;
/*-moz-width:359px;*/
border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;}

et c'était bien fonctionnel sur chrome.
Maintenant j'ai essayé sur mozilla et explorer mais nn c'était pas bon. En fait, les dimensions se perturbent!
Le problème s'est manifesté au début au niveau de border j'ai utilisé les préfixes et c'est bon.
Comment faire pour la requete width j'ai essayé avec les prefixes et ç'était pas fonctionnel!

Merci pour toute information!
Cordialement

[FirePrawn]

Bonjour,

Es-tu sûr que ce n'est pas tout simplement le padding et la bordure qui te jouent des tours ?
En effet, ton élément a dans ton cas une taille totale de 369px (width + padding * 2 + border * 2).

[a-sana]

Non, c'est pas ça le problème mais j'ai trouvé une solution
J'ai ajouté ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#msg, x:-moz-any-link{ width:350px!important;}

dans ma feuille de style sous mon ancienne classe.
C'est bon maintenant pour mozilla reste sur opera

[NoSmoking]

Bonjouor,

J'ai ajouté ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#msg, x:-moz-any-link{ width:350px!important;}

dans ma feuille de style sous mon ancienne classe.
C'est bon maintenant pour mozilla reste sur opera

et c'est quoi le prochain navigateur que tu vas devoir "hacker".

Non plus sérieusement je pense que tu fais fausse route et qu'il serait intéressant que tu nous montres le code HTML associé car on ne sais pas sur quel type d"élément cela est appliqué (lien apparemment).

Je suis persuadé qu'il existe une solution standard, tu type display:inline-block, pour éviter cette bidouille.

Y a t-il un DOCTYPE ? !important.

[a-sana]

c'est quoi le prochain navigateur que tu vas devoir "hacker".

En fait, je dois valider mon travail sur tout navigateur!

je vous accorde le code html de mon formulaire de contact:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div style="margin-right:100px; margin-top:40px;"><span class="titre-coordonnees">Nous contacter !</span>
<br/>
<div style="font-size:15px;">N’hésitez-pas à nous poser vos questions via ce formulaire.
Nous y répondrons dans les meilleurs délais.<br/><br/></div>
<div style="margin-left:30px;">
<form >
<p><label class="formulaire-label" style="font-size:14px;">Nom<span style="color:#1E8DCC; font-size:10px;"> *</span></label>[text* nom id:nom]</p>
<p><label class="formulaire-label" style="font-size:14px;">Prénom<span style="color:#1E8DCC; font-size:10px;"> *</span></label>[text* prenom id:prenom]</p>
<p><label class="formulaire-label" style="font-size:14px;">Email<span style="color:#1E8DCC; font-size:10px;"> *</span></label>[email* email id:mail]</p>
<p><label class="formulaire-label" style="font-size:14px;">Sujet</label>[text sujet id:sujet]</p>
<p>[textarea msg id:msg]</p>
<p style="margin-left:235px">[submit id:submit "Envoyer"]</p>
</form></div></div>

ainsi que mon style appliqué:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
.formulaire-label {
width:64px;
display: block;
float: left;
padding: 4px 10px 0px 6px;
border: 1px solid #999;
background-color: #EAEAEA;
text-shadow: 1px 1px 0px #FAFAFA;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-border-radius: 6px;
margin-right:5px;}
 
#nom, #prenom, #mail, #sujet, #msg,#msgan{
border: 1px solid #999999;
padding: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
margin-bottom:5px;
}
 
#msg,#msgan{
border: 1px solid #999999;
padding: 4px;
margin-bottom:5px;
width:359px;
/*-moz-width:359px;*/
border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-o-width:380px;}
 
#msg, x:-moz-any-link{ width:350px!important;}
.titre-coordonnees{color: #58595d; font-size: 20px; font-weight: normal; padding-bottom:50px!important;}
#contact-form input[type=submit] { font-size: 12px; font-weight: bold; background: transparent url('graphix/button-submit.png') no-repeat top left; text-align: center; color: #FFF; padding: 12px 0px 12px 0px; width: 126px; margin-left: 23.2%; border: none; cursor: pointer; font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; }
#contact-form input[type=submit]:hover { background-position: 0px -42px }

merci pour votre attention

[NoSmoking]

donc c'est une TEXTAREA <p>[textarea msg id:msg]</p>.

Pour faire pareil sur les différents navigateurs, il faut tenir compte des différentes valeurs par défaut avant de mettre ce que tu souhaites

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
textarea{
  font-family: monospace;
  font-size:13px;
  resize:none;
  padding:0;
  margin:0;
  height:39px;
  width:350px;
}

ensuite tu fais ce que tu veux ou pas loin.

En fait, je dois valider mon travail sur tout navigateur!

qu'est la validation dont tu parles, TOUS PAREILS ou validation W3C ?

Il est interprété comment ton code, l'écriture n'étant pas du pur HTML?

[Bovino]

Y a t-il un DOCTYPE ?

[a-sana]

J'ai fait une petite recherche sur le doctype pour pouvoir vous répondre et j'ai trouvé que c'est indispensable pour la validation du code css!
Pour moi, je travaille sur wordpress! En fait, j'ai créé mon formulaire dans la partie admin. le doctype s'intègre par défaut! nn?
car dans ma feuille de style principal je n'ai pas quelque chose like:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

merci de me corriger! je suis pas de tout expert donc j'essaie de bien répondre à vos questions mais je sais pas si j'ai bien compris!!

cordialement!