28173 sujets

CSS et mise en forme, CSS3

[Formulaire] Firefox ne tient pas compte de la propriété width

Bonjour,

je cherche à créer des formulaires avancés en épurant au maximum mon code (accessibilité et réponse aux normes oblige!).
le but pour moi est de faire s'afficher 4 items de checkbox par ligne et que l'alignement reste homogène.

ça fonctionne très bien sous IE6 et sous Opera, mais Firefox à l'air de refuser la propriété width (que çe soit en % ou en pixels) dont je me sers pour donner une largeur aux items.

j'ai utilisé le même procédé pour faire s'afficher 2 items de boutons radios par ligne et ça fonctionne...

vous pouvez voir ma page test ici :
http://cmlien.free.fr/form/styled-form-2.html

j'emploie une classe label.four-columns-checkboxes pour définir les propriétés de styles.

voici le code CSS :

label.four-columns-checkboxes {
	width: 22%; 
	text-align: left; 
	margin: 0; 
	padding: 0;
	padding-left: 10px;
}


et le HTML :

<!-- CHECKBOXES (several columns) -->
	<li>
		<p class="generic-form">Checkboxes - Which was your favourite video game back in the 90's?</p>
			<label class="four-columns-checkboxes" for="rickd"><input id="rickd" type="checkbox" /> Rick Dangerous</label>
			<label class="four-columns-checkboxes" for="shinobi"><input id="shinobi" type="checkbox" /> Shinobi</label>
			<label class="four-columns-checkboxes" for="nebulus"><input id="nebulus" type="checkbox" /> Nebulus</label>
			<label class="four-columns-checkboxes" for="lemmings"><input id="lemmings" type="checkbox" /> Lemmings</label>
			<label class="four-columns-checkboxes" for="doubled"><input id="doubled" type="checkbox" /> Double Dragon</label>
			<label class="four-columns-checkboxes" for="bubbleb"><input id="bubbleb" type="checkbox" /> Bubble Bobble</label>
			<label class="four-columns-checkboxes" for="lotus"><input id="lotus" type="checkbox" /> Lotus esprit turbo challenge</label>
			<label class="four-columns-checkboxes" for="populous"><input id="populous" type="checkbox" /> Populous</label>
			<label class="four-columns-checkboxes" for="monkeyi"><input id="monkeyi" type="checkbox" /> Monkey Island</label>
			<label class="four-columns-checkboxes" for="ik"><input id="ik" type="checkbox" /> International Karaté</label>
			<label class="four-columns-checkboxes" for="princep"><input id="princep" type="checkbox" /> Prince of Persia</label>
			<label class="four-columns-checkboxes" for="other"><input id="other" type="checkbox" /> Another one...</label>
	</li>


je n'ai rien trouvé d'assez "avancé" au niveau tutoriels sur le net, alors je m'en remets à vous.
je vous remercie d'avance pour vos réponses!
Modifié par -Frank (24 Nov 2006 - 15:44)
Modérateur
bonjour,

le label est une balise de type 'inline' qui n'est pas dimensionnable de part sa nature.

Un float , ou un position:absolute(inadapté ici) permettent alors de dimensionné ce type de balise.

label.four-columns-checkboxes {
	width: 22%; 
	text-align: left; 
	margin: 0; 
	padding: 0;
	padding-left: 10px;
float:left;
}



++
merci pour ta réponse.

je me rends compte que mon problème est autre... je ne parviens pas à aligner mes éléments sous firefox lorsque certains choix passent sur deux lignes alors que d'autres restrent sur une seule.

sans la propriété float: left; IE6 et Opera alignent les items par défaut et j'obtiens le résultat attendu (cf. url donné plus haut). quand j'ajoute le float: left; ça devient la pagaille!
kouiny a écrit :
Pour quand un naviqguateur universel !! Sérieux !!
Pour jamais j'espère... C'est avec la concurrence que les choses avancent (en tout cas, tant qu'elle est constructive...).
Moi je suis contre c'est plus prise de tête pour les webmasters, c'est sur quand on parle d'autre chose comme les FAI la preuve aujourd'hui du prix de l'adsl, là c'est intéressant, après en revenant sur les navigateurs, entre IE7 et Firefox 2 la grande différence il y en a pas tant que ça.
Modifié par kouiny (24 Nov 2006 - 17:35)
@kouiny

Merci de s'en tenir au sujet de -Frank ou d'ouvrir un autre sujet d'en ouvrir un autre dans le Bar Smiley cligne .
Sujet clos
Aller à