28172 sujets

CSS et mise en forme, CSS3

[Résolu] Affichage sur les navigateurs des INPUT avec height redéfini.

Bonjour,

je fait un formulaire et je voudrai que l'affichage soit le même sur Safarie et Firefox sur Mac
et sur IE 7 et Firefox sur PC.

Tous les affichages sont convenables sur ces navigateurs sauf sur Firefox sur PC.

Il semble que le height des input ne soit pas interprété pareil.

Si quelqu'un a une piste pour comprendre pourquoi ça ne fonctionne pas sur FF, et comment faire pour contourner le problème...

voici le HTML suivi du CSS:

HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr-FR"><head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<title>Inscription </title>
</head><body>
<div id="label">
    Civilité:<br>
    Nom:*<br>
    Prénom:*<br>
    Fonction:*<br>
    Societe:*<br>
    Adresse:<br>
    Code Postal:<br>
    Ville:<br>
    Téléphone:<br>(ligne directe)<br>
    Portable:*<br>
    Date de naissance:<br>
    Adresse email:*<br>
    Confirmation adresse email:<br>
    Mot de passe:*<br>
    Confirmation mot de passe:<br>
Rubriques:*</div>
<div id="valeur">
<form id="detail" name="inscrire" method="post" action="http://">
    <select name="icivilite">
  <option value="Mr">Mr</option>
  <option value="Mme">Mme</option>
  <option value="Mle">Miss</option>
</select><br>
	<input name="inom" value="" type="text"> <br>
	<input name="iprenom" value="" type="text"> <br>
	<input name="ifonction" value="" type="text"> <br>
    <input name="isociete" value="" type="text"> <br>
    <input name="iadresse" value="" type="text"> <br>
    <input name="icodePostal" value="" type="text"> <br>
    <input name="iville" value="" type="text"> <br>
    <input name="itel" value="" type="text"> <br>&nbsp;<br>
    <input name="igsm" value="" type="text"> <br>
    <input name="inaissance" value="" type="text"> <br>
	<input name="imail" value="" type="text"> <br>
    <input name="imail2" value="" type="text"> <br>
    <input name="ipwd" value="" type="text"> <br>
    <input name="ipwd2" value="" type="text"> <br>
    <input name="ilangue" value="" type="hidden"><br>
      <input name="ilettres" onclick="javascript:masque(document.inscrire, 'lettre[]');" checked="checked" value="1" type="radio">Je veux recevoir tous les communiqués de presse<br>
      <input name="ilettres" onclick="javascript:affiche(document.inscrire, 'lettre[]');" value="0" type="radio">Je veux recevoir seulement les communiqués de presse des thèmes suivants :<br>
      <input name="ilettre[]" value="1" type="checkbox">
Agroalimentaire<br>
<input name="ilettre[]" value="2" type="checkbox">
Associations<br>
<input name="ilettre[]" value="3" type="checkbox">
Culture<br>
<input name="ilettre[]" value="4" type="checkbox">
Economie<br>
<input name="ilettre[]" value="5" type="checkbox">
Equipement de la maison<br>
<input name="ilettre[]" value="6" type="checkbox">
Evénement - Agenda<br>
<input name="ilettre[]" value="7" type="checkbox">
NTIC<br>
<input name="ilettre[]" value="8" type="checkbox">
People<br>
<input name="ilettre[]" value="9" type="checkbox">
Politique<br>
<input name="ilettre[]" value="10" type="checkbox">
Santé<br>
<input name="ilettre[]" value="11" type="checkbox">
Sciences<br>
<input name="ilettre[]" value="12" type="checkbox">
Shopping produits<br>
<input name="ilettre[]" value="13" type="checkbox">
Social<br>
<input name="ilettre[]" value="14" type="checkbox">
Société<br>
<input name="ilettre[]" value="15" type="checkbox">
Sport<br>
      <input value="Je m'inscris" type="submit"></form>
</div>
</body></html>


Et le CSS:


body {
	background:url(../images/bg.png) left top;
	background-repeat:repeat;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:62.5%;
	color:#486D7E;
	text-align:center;
	margin:0px;
	padding:0px;
}
a {
	font-size:1em;
	text-decoration:underline;
	border-width:0px;
}
a:hover {
	text-decoration:underline;
}
#label {
	float:left;
	width:180px;
	text-align:right;
	line-height:27px;
	margin:0px;
	padding:0px;
}
#valeur {
	margin:0px;
	margin-left:185px;
	padding:0px;
	text-align:left;
	line-height:27px;
}
input {
	height:12px;
	line-height:27px;
	vertical-align:top;
	margin:0px;
	padding:5px;
}
form {
	padding:0px;
	margin:0px;
}


Merci à tous !
Modifié par jardinDeSites (15 Dec 2009 - 19:02)
bonjour,

il est preferable de donner un label a chaque imput.

Ensuite , la mise en forme n'en devient que plus aisée .
ex: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="fr-FR">
<head>
<title>form</title>
<style type='text/css'> 
label {float:left;width:100px;text-align:right;margin-right:0.3em;}
p {clear:left;}
</style>
</head>
<body>
<form action ="" method="post">
<p><label for="icivilite">Civilités : </label><select name="icivilite"> 
  <option value="Mr">Mr</option> 
  <option value="Mme">Mme</option> 
  <option value="Mle">Miss</option> 
</select></p>
<p>

</p><label for="inom">Nom * : </label><input name="inom" value="" type="text"></p>

<p>etc ...</p>
<p>     <input value="Je m'inscris" type="submit"></p>
	</form>
</body></html>


Le code devient alors logique et l'alignement des label input ne pose plus de problemes.
Pour un rendu identique des elements de formulaires (forme , dimension , alignement et images de fonds) d'un navigateur à l'autre c'est très limité voir impossible sans en passer par des javascript plus ou moins heureux pour l'utilisateur final .

Il ya quelque lien vers de bon tutos pour faire des formulaire accessible et confortable , si d'autres ont ces liens dans leur favoris qu'il les partagent Smiley smile , il te seront trés utiles .

GC
Bonjour,

Merci pour ta réponse rapide. Je ne savais pas que les labels acceptaient l'attribut float.

Mon problème était surtout lier à des positionnements de div imbriqués mal définis.

Merci
Stéphanie
Sujet clos
Aller à