28173 sujets

CSS et mise en forme, CSS3

Alignement différent FF/IE

Bonjour,

J'ai créé un formulaire pour une inscription, et j'ai un affichage différent sous IE et FF.

Pour une fois c'est IE qui affiche correctement à ma grande surprise.
Le problème vient des boutons d'options.

Voici le code : 

		<fieldset>
			<legend>Etat-civil</legend>
				<p>

					<label for="civilite">Civilité :</label>
            	<input type="radio" name="civilite" value="Melle" />Mademoiselle
            	<input type="radio" name="civilite" value="Mme" />Madame 
            	<input type="radio" name="civilite" value="M." />Monsieur
            	<img class="champ_obligatoire" src="i/redstar.gif" alt="Champ obligatoire" />
            </p>
             <p>
            	<label for="prenom">Prénom :</label>
            	<input type="text" name="prenom" value="" /><img class="champ_obligatoire" src="i/redstar.gif" alt="Champ obligatoire" />

            </p>
           <p>
            	<label for="nom">Nom :</label>
            	<input type="text" name="nom" value="" /><img class="champ_obligatoire" src="i/redstar.gif" alt="Champ obligatoire" />

            </p>
         </fieldset>


Voici l'affichage avec IE : http://www.polygonis.com/tests/pb-alignement-ie.gif et avec FF : http://www.polygonis.com/tests/pb-alignement-ff.gif

Merci d'avance pour votre aide.
Modifié par pyxosledisciple (01 Feb 2006 - 14:12)
Modérateur
bonjour,
si tu mettais aussi le css et eventuellement le doctype utilisé, cela pourrait aider a visualiser et reproduire ton defaut en local... et en trouver la cause.
a plus
gcyrillus a écrit :
bonjour,
si tu mettais aussi le css et eventuellement le doctype utilisé, cela pourrait aider a visualiser et reproduire ton defaut en local... et en trouver la cause.
a plus


Doctype :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



La feuille de style qui est loin d'être optimisée :

legend {
	color: #000;
	padding: 0 5px 0 0;
}

input {
	margin-right: 5px;
}

fieldset {
	width: 100%;
}



#identification label, #creer_compte label, #saisie_produit label, #nouvelle_adresse label, #recherche_directe label, #selection_liste label, #choix_article label, #modifier_password label, #associer_photo label, #modif_produit label {
/*** Mise en forme des intitul&#65533;s de champs ***/
	float: left;
/*** Tr&#65533;s important, ne pas suprimer ! ***/
	width: 40%;
/*** Les intitul&#65533;s prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;
/*** ... et ils sont align&#65533;s &#65533; droite... ***/
	vertical-align: top;
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;
/*** ... et centr&#65533;s verticalement. ***/
}

#historique_commande p, #historique_articles p, #creer_compte p, #modifier_password p, #oubli_password p, #identification p, #nouvelle_adresse p {
	margin: 0 0 0 0;
}

#creer_compte p, #modifier_password p, #oubli_password p, #identification p, #nouvelle_adresse p {
	margin-top: 2px;
	margin-bottom: 2px;
}

Modifié par pyxosledisciple (01 Feb 2006 - 14:22)
Modérateur
Smiley smile , le css que tu laisse n'est pas de grande utilitée, quels sont les portions qui s'appliquent a ton "formulaire" a part ".champ_obligatoire " en faisant une recherche sur la page.

... peut tu editer de preference le css de ton topic precedent et ton formulaire de façon a juste avoir la portoin qui te pose probleme.

a plus Smiley smile
gcyrillus a écrit :
Smiley smile , le css que tu laisse n'est pas de grande utilitée, quels sont les portions qui s'appliquent a ton "formulaire" a part ".champ_obligatoire " en faisant une recherche sur la page.

... peut tu editer de preference le css de ton topic precedent et ton formulaire de façon a juste avoir la portoin qui te pose probleme.

a plus Smiley smile

C'est fait.
Je serais plus concis et complet dès le départ la prochaine fois. Smiley rolleyes
heu... les attributs "for" des balises "label" sont reliés aux "id" et non aux "name". De plus l'utilisation des labels que tu fait sur les "radio" est incorrecte. Le fiedset suivant s'affiche correctement chez moi (IE 6 & FF) avec ta feuille de style :
<fieldset>
  <legend>Etat-civil</legend>
  <p>
    Civilité :
    <input type="radio" id="civilite1" name="civilite" value="Melle" /><label for="civilite1">Mademoiselle</label>
    <input type="radio" id="civilite2" name="civilite" value="Mme" /><label for="civilite2">Madame</label>
    <input type="radio" id="civilite3" name="civilite" value="M." /><label for="civilite3">Monsieur</label>
    <img class="champ_obligatoire" src="i/redstar.gif" alt="Champ obligatoire" />
  </p>
  <p>
    <label for="prenom">Prénom :</label>
    <input type="text" id="prenom" name="prenom" value="" /><img class="champ_obligatoire" src="i/redstar.gif" alt="Champ obligatoire" />
  </p>
  <p>
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom" value="" /><img class="champ_obligatoire" src="i/redstar.gif" alt="Champ obligatoire" />
  </p>
</fieldset>

Modifié par streetpc (01 Feb 2006 - 19:28)
streetpc a écrit :
heu... les attributs "for" des balises "label" sont reliés aux "id" et non aux "name". De plus l'utilisation des labels que tu fait sur les "radio" est incorrecte. Le fiedset suivant s'affiche correctement chez moi (IE 6 & FF) avec ta feuille de style :

Pourrais-tu m'envoyer une copie d'écran car je n'arrive pas à un résultat correct ?
En tous cas merci d'avoir corrigé mon mauvais usage de la balise <label>.

Je vais revoir ta solution pour l'appliquer correctement.
La page complète :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <title>Test</title>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <style>
    legend {
	color: #000;
	padding: 0 5px 0 0;
}
input {
	margin-right: 5px;
}
fieldset {
	width: 100%;
}

#identification label, #creer_compte label, #saisie_produit label, #nouvelle_adresse label, #recherche_directe label, #selection_liste label, #choix_article label, #modifier_password label, #associer_photo label, #modif_produit label {
/*** Mise en forme des intitul&#65533;s de champs ***/
	float: left;
/*** Tr&#65533;s important, ne pas suprimer ! ***/
	width: 40%;
/*** Les intitul&#65533;s prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;
/*** ... et ils sont align&#65533;s &#65533; droite... ***/
	vertical-align: top;
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;
/*** ... et centr&#65533;s verticalement. ***/
}

#historique_commande p, #historique_articles p, #creer_compte p, #modifier_password p, #oubli_password p, #identification p, #nouvelle_adresse p {
	margin: 0 0 0 0;
}

#creer_compte p, #modifier_password p, #oubli_password p, #identification p, #nouvelle_adresse p {
	margin-top: 2px;
	margin-bottom: 2px;
}
    </style>
  </head>
  
  <body>
		<fieldset>
			<legend>Etat-civil</legend>
				<p>
					Civilité :
            	<input type="radio" id="civilite1" name="civilite" value="Melle" /><label for="civilite1">Mademoiselle</label>
            	<input type="radio" id="civilite2" name="civilite" value="Mme" /><label for="civilite2">Madame</label>
            	<input type="radio" id="civilite3" name="civilite" value="M." /><label for="civilite3">Monsieur</label>
            	<img class="champ_obligatoire" src="i/redstar.gif" alt="Champ obligatoire" />
            </p>
             <p>
            	<label for="prenom">Prénom :</label>
            	<input type="text" id="prenom" name="prenom" value="" /><img class="champ_obligatoire" src="i/redstar.gif" alt="Champ obligatoire" />
            </p>
           <p>
            	<label for="nom">Nom :</label>
            	<input type="text" id="nom" name="nom" value="" /><img class="champ_obligatoire" src="i/redstar.gif" alt="Champ obligatoire" />
            </p>
         </fieldset>    
  </body>
</html>


Et chez moi ca donne ceci.
Sujet clos
Aller à