Interprétation de formulaire <FORM> par IE

14 oct. 2006, 20:40

Bonjour !

J'ai un petit souci.

IE insère des sauts de ligne avant et après la balise FORM dans la page WEB (ce que Firefox ne fait pas), ainsi lorsque j'utilise deux formulaires qui se suivent dans mon code HTML :

Code : Tout sélectionner

<form>
1er formulaire qui appelle le fichier test.php
</form>
<form>
2e formulaire qui appelle le fichier test2.php
</form>

Je me retrouve avec un saut de ligne entre les formulaires dans ma page Web (je n'ai donc pas le même affichage dans IE et dans FIREFOX).

Est-ce que quelqu'un a une solution ? Je ne trouve pas d'aide à ce sujet.

Meci et à plus.

Zeuf

14 oct. 2006, 20:45

aurais-tu un exemple en ligne ? Parce qu'expliqué simplement comme ça, c'est plutôt abstrait

14 oct. 2006, 21:32

Oui, j'imaginais bien que ce ne serait pas super clair.

Voici un exemple (pas super évident parce que cela fait un peu "... les mouches" mais bon...)

http://www.pelloud.com/envoidunmail.html

Sur cette exemple, le formulaire s'affiche sous le logo après un <br /> dans Firefox, comme cela est prévu dans le code. Par contre dans IE c'est comme s'il s'affichait après un double <br />. C'est comme si la balise <form> ajoutait automatiquement un <br /> avec IE.

Est-ce que c'est un peu plus clair ?

Zeuf

14 oct. 2006, 21:55

Bonsoir,

C'est un PB connu,
IE d'un coté et FF, Opéra, Netscape, ... de l'autre.

IE ne respecte pas le recommendations du W3C concernant les "boites" et bien entendu les les blocks.

Si tu veux le même affichage il faut que tu joues avec CSS sur les propriétés 'padding' et 'margin'.

23 oct. 2006, 06:10

Salut !

Ok j'ai trouvé la solution à mon petit souci !

La solution est la propriété display dans la feuille de style (CSS). En fait il y a un cours que j'ai sauté sur la structure des balises : bloc et en-ligne.

Pour tout savoir : http://css.alsacreations.com/Bases-et-i ... t-en-ligne

Enfin bref, il suffit d'ajouter une simple ligne dans sa CSS :

Form
{ display: inline}

Et tout rentre dans l'ordre !

A +

Zeuf

23 oct. 2006, 09:26

Bonjour,

Je pense que ce que tu as fais c'est de contourner le PB et non de le résoudre,

La balise '<form>', au sens CSS, est un élément de type "block" (ICI la liste) que tu fais devenir du type "in-line".

Le PB c'est que IE estime que les boites n'ont pas de marge externe (margin) il ne leur reconnait que la marge interne (padding) alors que le W3C leur attibue les deux.

Je pense qu'une solution plus élégante est de forcer FF, Opéra, etc à avoir le même comportement que IE en utilisant la propriété margin.

Code : Tout sélectionner

form {
   margin: 0 0 0 0;
}

23 oct. 2006, 11:21

Qu'on peut simplifier par

Code : Tout sélectionner

form
{ 
margin: 0;
}

23 oct. 2006, 11:23

Re,

Avec la forme courte j'ai eu des surprises, comme pour l'attribut "font"

23 oct. 2006, 11:30

Euh... je ne vois absolument pas de quoi tu parles

23 oct. 2006, 11:35

Re,
Que certains navigateurs interprètent mal les racourcis de "margin" et de "font", comme

Code : Tout sélectionner

balise{
   margin: 0;
   font: italic bold small-caps 24px Arial, sans-serif;
}

Interprétation de formulaire <FORM> par IE

Qui est en ligne