Hello !
alors comme je l'ai dit, le problème est réduit à sa plus simple expression, mais effectivement, sorti du contexte, ça ne ressemble à rien (en fait je m'attendais à ce que quelqu'un me dise que c'est un bug connu).
Pour répondre à ta question Heyoan, la largeur de 972px du menu est faite pour s'inscrire dans le conteneur qui fait 980px moins 4px de padding de chaque côté (sinon ça recouvre les bordures du cadre en image de fond). Pour une illustration, voir les captures.
Donc voici l'intégralité du code et ce que ça doit donner :
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#admin {
width: 980px;
margin: 10px auto;
background: url(../images/admin/cadre_admin_01.gif) no-repeat left top;
font: .8em Arial, sans-serif;
}
#tete-admin h1 {
float: left;
display: inline;
margin: 3px 0 0 30px;
padding: 0;
font: 900 1.2em Arial, sans-serif;
color: #fff;
background-color: #c00;
}
#tete-admin p {
padding: 4px 0 0 957px;
}
#tete-admin a {
display: block;
width: 17px;
height: 17px;
background: url(../images/admin/fermer_admin.gif) no-repeat;
}
#tete-admin a span {
display: none;
}
#corps-admin {
padding: 0 4px 4px;
background: url(../images/admin/cadre_admin_02.gif) no-repeat left bottom;
}
#menu-admin {
float: left;
width: 972px;
background: #fcc url(../images/admin/onglet_fond.gif) repeat-x bottom;
font-size: .9em;
line-height: normal;
}
#menu-admin ul {
margin: 0;
padding: 10px 10px 0;
list-style: none;
}
#menu-admin li {
float: left;
background: url(../images/admin/onglet_gauche.gif) no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
}
#menu-admin a {
float: left;
display: block;
width: .1em;
padding: 5px 15px 4px 6px;
white-space: nowrap;
text-decoration: none;
font-weight: 900;
color: #c66;
background: url(../images/admin/onglet_droit.gif) no-repeat right top;
}
#menu-admin > ul a {
width: auto;
}
#menu-admin a:hover {
color: #600;
}
#menu-admin .courant {
background-image:url(../images/admin/onglet_gauche-on.gif);
}
#menu-admin .courant a {
background-image:url(../images/admin/onglet_droit-on.gif);
color:#600;
padding-bottom:5px;
cursor: default;
}
#s_menu-admin {
clear: left;
float: left;
width: 972px;
font-size: .9em;
line-height: normal;
background: #fcc url(../images/admin/s_onglet_fond.gif) repeat-x bottom;
}
#s_menu-admin ul {
margin: 0;
padding: 3px 0 0 10px;
list-style: none;
}
#s_menu-admin li {
float: left;
margin: 0;
padding: 0 10px 5px 0;
}
#s_menu-admin a {
float: left;
display: block;
padding: 0;
white-space: nowrap;
font-weight: 900;
text-decoration: none;
color: #c99;
}
#s_menu-admin a:hover {
color: #300;
}
#s_menu-admin .courant a {
color: #300;
cursor: default;
}
.non-souscrit {
float: left;
padding: 0;
white-space: nowrap;
font-weight: 900;
text-decoration: line-through;
color: #ccc;
cursor: default;
}
#contenu-admin {
clear: both;
padding: 5px;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#menu-admin a, #s_menu-admin a {
float: none;
}
/* End IE5-Mac hack */
#admin h2 {
margin: 0;
font-size: 14px;
}
#admin table {
font-size: 12px;
}
#admin form {
width: 450px;
margin: 0;
padding: 0;
border: 1px solid #0f0;
}
#admin form fieldset {
margin: 5px;
padding: 5px;
}
#admin fieldset legend {
font-weight: 700;
color: #900;
}
#admin fieldset p {
margin: 3px;
padding: 0;
}
#admin fieldset label {
float: left;
width: 120px;
margin: 0;
padding: 0 .5em 0 0;
line-height: 1.6em;
text-align: right;
font-weight: 700;
}
#admin fieldset .legende {
margin: 0 0 0 125px;
padding: 0;
font-style: italic;
color: #666;
background: transparent;
}
#admin #piedform {
margin: 5px;
padding: 5px;
text-align: right;
color: #fff;
background-color: #f99;
}
#admin #piedform input {
font-weight: 700;
}
#admin input, #admin textarea {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="admin">
<div id="tete-admin">
<h1>Administration de votre site</h1>
<p><a href="../index.php?page=commun" title="Fermer l'administration"><span>(Fermer)</span></a></p>
</div> <!-- fin #tete-admin -->
<div id="corps-admin">
<div id="menu-admin">
<ul>
<li class="courant"><a href="index.php?page=commun">Configuration</a></li>
<li><a href="index.php?page=15">Contenu</a></li>
<li><a href="index.php?page=compteur">Options</a></li>
<li><a href="index.php?page=aide">Aide</a></li>
</ul>
</div> <!-- fin #menu-admin -->
<div id="s_menu-admin">
<ul>
<li class="courant"><a href="index.php?page=commun">Paramètres généraux</a></li>
<li><a href="index.php?page=couleur">Couleurs</a></li>
</ul>
</div> <!-- fin #s_menu-admin -->
<div id="contenu-admin">
<form method="post" action="index.php?page=commun" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="512000" />
<input type="hidden" name="envoi" value="commun" />
<fieldset>
<legend>Visuel</legend>
<p>
<label for="visuel">Modèle de site :</label>
<select name="visuel" id="visuel">
<option value="visu01">visu01</option>
<option selected="selected" value="visu02">visu02</option>
<option value="visu03">visu03</option>
</select>
</p>
<p>
<label for="logo">Logo :</label>
<input type="file" name="logo" id="logo" size="20" />
<div class="legende">laisser vide pour conserver le logo actuel</div>
</p>
</fieldset>
<fieldset>
<legend>Vos coordonnées</legend>
<p>
<label for="nom">Nom :</label>
<input type="text" name="nom" id="nom" value="" size="34" />
</p>
<p>
<label for="adresse">Adresse :</label>
<textarea name="adresse" id="adresse" rows="3" cols="26"></textarea>
</p>
<p>
<label for="tel">Téléphone :</label>
<input type="text" name="tel" id="tel" value="" size="34" />
</p>
<p>
<label for="mobile">Mobile :</label>
<input type="text" name="mobile" id="mobile" value="" size="34" />
</p>
<p>
<label for="fax">Fax :</label>
<input type="text" name="fax" id="fax" value="" size="34" />
</p>
<p>
<label for="mail">E-mail :</label>
<input type="text" name="mail" id="mail" value="" size="34" />
</p>
</fieldset>
<p id="piedform">
<input type="submit" name="envoi_commun" value="Envoyer" />
</p>
</form>
</div> <!-- fin #contenu-admin -->
</div> <!-- fin #corps-admin -->
</div> <!-- fin #admin -->
</body>
</html>
capture sous firefox (comportement normal) :
capture sous iexplore :
Je ne sais plus ce que j'ai changé, ce n'est plus tout à fait pareil mais j'ai quand même le problème de la bordure gauche du formulaire sous ie.
Autre chose que je n'avais pas vue : la marge supérieure du formulaire est beaucoup trop grande sous ie.
quelqu'un a une idée ?
merci d'avance
Molive
Modifié par Molive (19 Oct 2006 - 21:05)
,
