width sur les différents navigateurs

Version imprimable

Bonjour!

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

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

09/11/2012, 10h32
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).
09/11/2012, 11h39
a-sana

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

Code:

#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 8O
09/11/2012, 13h03
NoSmoking

Bonjouor,

Citation:

Envoyé par a-sana

J'ai ajouté ceci

Code:

#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 8O

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.

Citation:

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:

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:

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

09/11/2012, 15h53
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:

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.

Citation:

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?
10/11/2012, 10h12
a-sana

Bonjour!

Merci, tout d'abord, pour votre interaction!

Bon,

Citation:

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

je parle de la validation W3C (si j'explique bien la notion je pense que la mise en page du site doit être bien organisée sur les navigateurs 3W)

Citation:

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

Merci de me plus expliquer cette question? pour bien répondre!

A propos, j'ai initialisé le style du textarea et rien n'est changé!

Une question encore à poser: toujours sur IE la mise en page se diffère d'une version à une autre!! A quoi peut on retourner ceci?
Y-a-t il un truc pour éviter ce problème et soit sur sans tester à chaque fois?!

Cordialement!
10/11/2012, 10h17
Bovino

Citation:

Envoyé par NoSmoking

Y a t-il un DOCTYPE ?
10/11/2012, 11h21
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:

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!
13/11/2012, 09h19
a-sana

Bonjour!

Bon, je pense que c'est impossible de valider la même mise en page à 100% sur tous les navigateurs!
Mieux que jamais sur la plupart, pour ceci j'ai utilisé les hacks css

merci NoSmoking! c grâce à votre intervention que j'ai fait attention à cette notion.

Merci pour toute intéraction!

Cordialement.