28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous !


Je suis en train d'essayer de formater un formulaire et je me trouve confronté à un problème !

Tout d'abord, l'url de la page la page pour que vous puissiez consulter le code :
http://www.potatos.fr/test_css/exemple19/exemple19.htm


Tout se passe bien sur mac et dans l'ensemble sur PC. Seulement dans l'ensemble car IE7 me pause un problème. Il apparaît entre chacun de mes éléments, des petites marges non-souhaitées comme le montre les captures d'écran suivantes :

Sur FF, pas de problème, les éléments sont collés :

upload/11284-ex1.gif

Sur IE7, par contre, il ya des marges superflues :

upload/11284-ex2.gif

Un petit zoom pour y voir plus clair :

upload/11284-ex3.gif


D'où viennent ces marges et comment m'en débarrasser ?


Merci,

Antoine
Modifié par RockMakesMeSweat (14 Dec 2007 - 12:50)
Par ailleurs, il semblerait qu'il s'agisse d'un formulaire.
Pourrais-tu nous donner un aperçu du résultat souhaité ?

Car dans ton l'utilisation d'une liste ainsi que de labels pourrait être une bonne idée...
Ce qui changerait pas mal la donne.
Voilà, le but est d'obtenir un formulaire de ce type :

upload/11284-Image1.jpg

Cette image est ce que j'obtiens sur les navigateur où cela "fonctionne".

Le code html associé à cette zone :
	
<div id="colonne_droite">
	<form id="form_contact" action="#" method="post">
		<input type="hidden" name="mode" value="send" class="hidden" />
		<fieldset class="left">
			<span>Subject</span><input type="text" class="text" name="objet" />
			<span>Name</span><input type="text" class="text" name="nom" />
			<span>Email</span><input type="text" class="text" name="email" />
			<span>Telephone</span><input type="text" class="text" name="telephone" />
			<span>Adress</span><input type="text" class="text" name="adresse" />
		</fieldset>
		<fieldset class="right">
			<span class="legend">Message</span><textarea name="message">


Et voici le style associé (il y a quelques éléments parasites qui concernent le reste de la page)

#confirmation{
	margin: 0 0 20px 0;
	padding: 20px;
	color: #b25509;/*a*/
	font-size: 15px;
	border: solid 1px #bfc1c3;/*trait epais*/
}

#form_contact{
	margin: 0 0 20px 0;
	padding: 0 10px 10px 10px;
	border: solid 1px #bfc1c3;/*trait epais*/
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #58595b;/*texte*/
	float: left;
	width: 551px;
}
#form_contact fieldset{
	margin: 0;
	padding: 0;
	border: none;
}
#form_contact fieldset.left{
	float: left;
	width: 200px;
}
#form_contact fieldset.footer a{
	vertical-align: bottom;
}
#form_contact fieldset span{
	margin: 5px 0 0 0;
	padding: 0;
	height: 20px;
	display: block;
	line-height: 20px;
	color: #58595b;/*texte*/
}
#form_contact input{
	margin: 0;
	padding: 0;
	display: block;
	border: solid 1px #bfc1c3;/*trait epais*/
	background-color: transparent;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #58595b;/*texte*/
}
#form_contact fieldset.left input{
	width: 190px;
	height: 20px;
}

#form_contact input.hidden{
	display: none;
}
#form_contact textarea{
	margin: 0;
	padding: 0;
	border: solid 1px #bfc1c3;/*trait epais*/
	background-color: transparent;
	display: block;
	width: 349px;
	height: 208px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #58595b;/*texte*/
}
#form_contact input:hover, #form_contact textarea:hover{
	background-color: #e6e6e6;/*gris fonce*/
}
#form_contact input:focus, #form_contact textarea:focus{
	background-color: #f5f5f5;/*gris clair*/
}
#form_contact fieldset.footer{
	clear: both;
	text-align: right;
	margin-top: 5px;
}
#form_contact fieldset.footer span.bouton img{
	margin: 0 5px 0 0;
	padding: 0;
	border: none;
 }
#form_contact fieldset.footer span.bouton a{
	color: #b25509;/*aa*/
	text-decoration: none;
	line-height: 12px;
 }  
#form_contact fieldset.footer span.bouton a:hover{
	color: #ffffff;
	background-color: #3fa6ac;/*bb*/
 }
 
 
#bande_bas{
	margin-top: 20px;
}


Antoine
Modifié par RockMakesMeSweat (14 Dec 2007 - 13:56)