28173 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai un petit problème avec la balise <select>. En fait, je voudrais être maître (autant que possible Smiley langue ) des marges de mon document, donc je commence par initialiser les marges. Par contre, j'ai un effet non souhaité: la liste déroulante n'affiche pas tout le texte (problème rencontré sous Firefox).

En essayant d'isoler le problème, je me suis aperçu qu'apparement c'est le padding:0 qui crée cet effet, mais je ne trouve pas de solution.

Je vous mets la version "light":


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
	<meta http-equiv="Content-Language" content="fr" />
	<title>Maquette</title>
	
<style type="text/css">

* 	/* initialisation des marges */
{
	margin: 0; 
	padding: 0;
}

</style>
</head>

<body>
	<form method="post" action="#">
		<p>
			<label for="nom_competition">Compétition:</label>
			<select id="nom_competition" name="nom_competition">
				<option value="option1">Première option de liste</option>
				<option value="option2">Seconde option de liste</option>
				<option value="option3">Troisième option de liste</option>
			</select>
		</p>
	</form>
</body>
</html>


J'ai essayé de chercher ici et sur google, j'espère ne pas être passé à côté de la solution et vous faire perdre du temps avec quelque chose qui doit être bien simple...
Modifié par Vikchill (29 Aug 2006 - 20:08)
Salut.

Il ne manque pas quelque chose dans la partie css ? tu utilises le "sélecteur universel" pour annuler tout ce qui est marge & padding, c'est ça ?
* {
margin: 0,
padding: 0;
}


En règle général, il est plus coûteux (en temps & en lignes de code) de redéfinir toutes les marges que de corriger celles qui posent problème ...
Il y a une raison spécifique qui te pousse à vouloir maîtriser au pixel près les dimensions des marges & padding ?
C'est corrigé, il s'agissait d'une erreur de copier-coller. J'avais enlevé le sélécteur universel en enlevant le commentaire. Désormais le code est correct (fidèle à ce qui me pose problème du moins).

J'ai également précisé que mon problème se produit sous Firefox, détail important que j'avais omis.

Pour le reste, la solution que j'envisageais était effectivement d'initialiser les marges au cas par cas. Si alsacréations n'existait pas, j'aurais fait sauter le selecteur universel, mais vu que je trouve ici la majeure partie de mes ressources, je voulais soummettre le problème pour mieux le comprendre.

Le but n'est pas réellement de maîtriser au pixel près, mais de maîtriser au maximum (je sais, la nuance est faible), pour avoir un rendu final assez proche quel que soit le navigateur.

Je précise que pour le moment, je suis en phase de développement, je mets en page sous FF pour plus tard adapter aux autres lecteurs. Le sélecteur universel est la solution la plus simple, en apparence en tout cas, pour initialiser les marges
Modifié par Vikchill (28 Aug 2006 - 23:11)
Je me permets un petit upage au cas ou le problème inspirerait quelqu'un de moins noctambule, d'autres ont du faire face à ce problème avant moi Smiley lol
J'ai continué plus avant mes recherches, il semble que la solution soit d'attribuer à la balise option un margin-right.