[CSS]problème centrage texte de bouton dans une boîte
Posté : 06 sept. 2005, 11:38
Code : Tout sélectionner
<!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" lang="fr" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-language" content="fr" />
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<style type="text/css">
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0px;
padding: 0px;
border: 0px none;
}
body {
color: Black;
background: White;
margin: 10px 10px 10px 10px;
}
#menu {
background-color: White;
float: left;
width: 150px;
}
#menu input {
cursor: pointer;
text-decoration: none;
font-size: 10px;
color: #444444;
background-color: White;
text-align: left;
margin: 0px 0px 0px 2px;
width: 150px;
}
#menu .menuNiveau1 {
background-color: #E6FFFF;
font-size: 10px;
border: 1px solid #808080;
margin: 0px 0px 5px 0px;
}
#menu .menuNiveau1 input {
background-color: #E6FFFF;
}
#menu .menuNiveau1Actif {
background-color: #6FA8D5;
font-size: 10px;
border: 1px solid #808080;
margin: 0px 0px 5px 0px;
}
#menu .menuNiveau1Actif input {
background-color: #6FA8D5;
font-weight: bold;
}
#menu .menuNiveau2 {
background-color: White;
font-size: 10px;
border: 0px none;
margin: 10px 0px 10px 10px;
}
#menu .menuNiveau2Actif {
background-color: White;
font-size: 10px;
border: 0px none;
margin: 10px 0px 10px 10px;
}
#menu .menuNiveau2Actif input {
font-weight: bold;
}
}
</style>
</head>
<body>
<div id="menu">
<form id="menuForm" action="main.php" method="post">
<p class="menuNiveau1">
<input type="hidden" name="action" value="accueil" />
<input type="submit" value="Gestion des Elèves" />
</p>
<p class="menuNiveau1Actif">
<input type="hidden" name="action" value="accueil" />
<input type="submit" value="Editions globales" />
</p>
<p class="menuNiveau2">
<input type="hidden" name="action" value="accueil" />
<input type="submit" value="Elèves" />
</p>
<p class="menuNiveau2Actif">
<input type="hidden" name="action" value="accueil" />
<input type="submit" value="Demandes Cantine" />
</p>
<p class="menuNiveau2">
<input type="hidden" name="action" value="accueil" />
<input type="submit" value="Demandes fond social" />
</p>
<p class="menuNiveau1">
<input type="hidden" name="action" value="accueil" />
<input type="submit" value="Editions gestionnaire" />
</p>
</form>
</div>
</body>
</html>

Sous Firefox

En ajoutant dans "#menu input" : width: 150px;, on obtient
Sous IE

Sous Firefox

Quelqu'un a une idée ?