Marge de mon formulaire incohérente entre FF et IE

Bonjour,
Je n'arrive pas à comprendre une marge entre IE etFF.
J'ai fais un formulaire dont voici le code

<div style="float: left; width: 220px; ">
  <h1> <b> / / / Formulaire </b></h1>
  <div id="container">
    <form action="vars.php" method="post">
      <label for="textinput">NOM:</label>
      <br />
      <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" />
      <label for="textinput">PRENOM:</label>
      <br />
      <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" />
      <label for="textinput">ADRESSE:</label>
      <br />
      <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" />
      <label for="textinput">VILLE:</label>
      <br />
      <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" />
      <label for="passwordinput">TEL:</label>
      <br />
      <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" />
      <label for="textinput">MAIL:</label>
      <br />
      <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" />
      <br />
      <label for="textareainput">MESSAGE:</label>
      <br />
      <textarea id="textareainput" name="textareainput" class="textarea"></textarea>
      <br />
      <br />
      <input type="submit" value="Envoyer" class="buttonSubmit" />
      <div id="stylesheetTest"></div>
    </form>
  </div>
  <p class="ancre"> <a href="#"> <img class="image" onmouseover="this.src='images/direction_rol.gif'" title="haut de la page" onmouseout="this.src='images/direction.gif'" alt="retour menu" src="images/direction.gif" /> </a> </p>
</div>

et

h1 {
	font-size: 1.2em;
	margin: 0 0 0 0px;
	color: #E94F1A;
	font: Arial, Helvetica, sans-serif;
	letter-spacing: 0.7pt;
}
img {
	border:0;
}
#container {
	padding:0 ;
	margin: 0;

}

/*Forms defaults*/
input, textarea {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	color:#404040;
	font-weight:bold;
}
label {
	color:#999;
	cursor:pointer;
	padding-left:2px;
	line-height:15px;
	vertical-align:top;
}
label.chosen {
	color:#333;
}

/*Transparent items*/
.transparent {
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity: 0;
	border:0px solid #FFF;
	background:#FFF;
	z-index:10;
	cursor:pointer;
}
.transparentFake {
	background:none;
	border:none;
}
.transparent2 {
	z-index:10;
}



/*Text inputs*/
.textinput, .textinputHovered {
	width:220px;
	height:15px;
	background:url(../images/input.gif) no-repeat left top;
	border:none;
	padding:4px 8px;
}
.textinputHovered {
	background-position:left bottom;
}

/*Text areas*/
.textarea, .textareaHovered {
	width:220px;
	height:125px;
	background:url(../images/textarea.gif) no-repeat left top;
	border:none;
	padding:4px 8px;
}
.textareaHovered {
	background-position:left bottom;
}





/*Button*/
.buttonSubmit, .buttonSubmitHovered {
	width:69px;
	height:26px;
	color:#FFF;
	font-weight:bold;
	padding:2px 5px;
	background:url(../images/button.gif) no-repeat left top;
	cursor:pointer;
	border:none;
}
.buttonSubmitHovered {
	background-position:left bottom;
}

/*Test div - testing if stylesheets are enabled*/
#stylesheetTest {
	position:absolute;
	left:-999px;
	width:10px;
	height:10px;
}

Sous FF le formulaire "colle" sous mon titre ( c'est ce que je désire) mais sous IE il se trouve un espace...
Quelqu'un pourrait-il m'aider?
Merci

Ton "container" ne semble pas servir à grand-chose...

J'utilise plutôt la syntaxe appropriée aux formulaires, qui donne quelque-chose de ce genre :

<form action="jours_feries.php" method="post" name="">
<input type="hidden" name="" id="" value="" />
<fieldset>
<legend class="txt lg">Choix de l'année</legend>
<select name="ann" id="ann" class="inputf txt">.........

..........

........</select>
</fieldset><br /><br />
<fieldset><legend class="txt lg">Nombre de jours à mentionner</legend>
<label for="njours" class="txt">Nombre de jours</label>
<input type="text" name="njours" id="njours" size="2" maxlength="2" value="" class="inputf txt" /><br /><br />
<input type="image" src="ok.png" align="middle" name="ok" /></fieldset></form>

Avec dans le css les définitions de classes appropriées, et en notant que tout cela ne doit pas prendre place entre des balises <p></p>.

Bien voir l'imbrication "form" / "input hidden" / "fieldset" !

Donc réglage du texte, des positions, marges etc pour chaque élément, ce qui te permet de régler avec précision ta mise en page.

A visiter :
Des formulaires plus simples
Modifié par jcm (21 Aug 2005 - 19:30)

jcm a écrit :
Bien voir l'imbrication "form" / "input hidden" / "fieldset" !

Précision: ce formulaire ne sera valide qu'en HTML ou XHTML transitional : l'input hidden doit être inclus dans un élément de type bloc en strict (au plus simple, dans le premier fieldset)

Sinon, pour le problème ci-dessus : IE (et Opera) appliquent un margin-top et un margin-bottom par défaut à l'élément form. Firefox n'applique qu'un margin-bottom.

Bonjour Laurent,
Eh bien je suis débutant en css
Voici mon doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Tu parles de "fieldset" , dois-je rajouter un div à quelque part?
Merci pour l'info( IE et Opéra) je ne savais pas.
Si tu ( vous) pouvais me donner un coup de main , ça serait aimable.

merci d'avance

Un petit détour de temps en temps par cet article sur le choix d'une DTD, quand tu buttes sur un problème de validité, devrait te permettre de découvrir petit à petit les différences entre les doctypes.

Pour le problème des formulaires :

- en HTML4.01 transitional et en XHTML1.0 transitional, tu as le droit d'écrire :

<form ...>
   <label ...>
   <input ...>
</form>

C'est à dire, de placer directement les éléments du formulaire dans l'élément <form>

Mais en HTML4.01 strict et en XHTML1.0 strict (ton doctype), tu n'en a pas le droit. Les éléments du formulaire doivent être placés séparément ou ensemble dans un élément de type bloc, c'est à dire au choix et selon les besoins :
- div
- p
- ul, ol
- dl, dt, dd
- fieldset (spécialement fait pour grouper les éléments de formulaire qui vont ensemble)
- etc... (quoique les principaux soient ci-dessus)

Donc tu pourras faire :

<form ...>
   [b]<p>[/b]
      <label ...>
      <input ...>
   [b]</p>[/b]
</form>

Ou:

<form ...>
   [b]<div>[/b]
      <label ...>
      <input ...>
   [b]</div>[/b]
</form>

Ou :

<form ...>
   [b]<fielset>[/b]<legend>...</legend>
      <label ...>
      <input ...>
   [b]</fieldset>[/b]
</form>

etc.
Modifié par Laurent Denis (21 Aug 2005 - 20:12)

Merci pour les info.::
Juste un dernier truc pour margin du form:"IE (et Opera) appliquent un margin-top et un margin-bottom par défaut à l'élément form. Firefox n'applique qu'un margin-bottom."


Cooment dois-je écrire ceci?
Dans css?
Dans body?

merci