Décalage de menu sous IE

Rapport avec les formulaires ?

Sujet résolu

7 avril 2006 à 22:51:33

Salut à toutes et à tous,

Je viens de créer mon premier site web grâce aux cours du Site du Zér0, et je viens de remarquer que ma page d'accueil a un gros problème sous IE.
En fait, c'est le menu de droite qui se trouve décalé et trop gros, alors qu'il est parfait sous Firefox.
Voici plus le lien de celui-ci, mais quand même les codes XHTML et CSS :

<div class="element_menu">
<h4>Login</h4>
<form method="post" action="traitement.php">
<p class="login1"><label>Pseudo :<input type="text" name="pseudo" size="10" maxlength="20" tabindex="1" /></label></p>
<p class="login1"><label>Mot de passe :<input type="password" name="pass" size="10" maxlength="10" tabindex="2" /></label></p>
<p class="login2"><label><input class="log" type="checkbox" name="log_auto" value="Login auto" /><span class="auto">Login Auto</span></label></p>
<p><input class="submit" type="submit" value="Envoyer" tabindex="300" /><input class="submit" type="reset" value="Effacer" /></p>
</form>
<h5 class="h5"><a href="inscription.php" title="Je veux m'inscrire" class="oubli">S'inscrire</a><a class="oubli" href="pass.php" title="J'ai oublié mon mot de passe">Pass oublié</a></h5>
</div>
<div class="element_menu">
<h4>Sondage</h4>
<form method="post" action="traitement.php">
<p class="login">Sur ce site, vous voulez plus de :<br /><br />
<label><input type="radio" name="plus" value="news" />News</label><br />
<label><input type="radio" name="plus" value="download" />Downloads</label><br />
<label><input type="radio" name="plus" value="forum" />Interactivité</label><br />
<label><input type="radio" name="plus" value="design" />Design</label><br />
<label><input type="radio" name="plus" value="autre" />Autre</label><br />
<label><input type="radio" name="plus" checked="checked" value="rien" />Rien</label><br /><br />
<input class="submit2" type="submit" value="Envoyer" />
</p>
</form>
</div>

.login,.pub
{
margin-left: 10px;
font-weight: bold;
}
.login1
{
margin-left: 23px;
font-weight: bold;
}
.login2
{
font-weight: bold;
margin-left: 20px;
}
.submit
{
margin-left: 4px;
padding-left: 2px;
padding-right: 2px
}
.submit2
{
padding-left: 20px;
padding-right: 20px;
margin-left: 5px;
}
.auto
{
margin-left: 5px;
}
.oubli
{
margin-left: 10px;
text-decoration: underline;
}
.h5
{
margin-top: 0px;
margin-bottom: 15px;
}

Voilà, je ne vous demande pas de juger ce code svp, car je sais qu'il y a plein de choses que je pourrais regrouper, mais je le ferai plus tard (d'ailleurs, le XHTML se dérange quand je l'expose ici).

EDIT : J'ai enlevé une partie du code en pour ne laisser que la partie qui a l'air de poser problème, j'en rajouterai s'il le faut.

Merci d'avance

Anonyme

8 avril 2006 à 9:59:01

En effet, l'affichage est parfait sous MF,

eh bien, ton code est correct

Je pense que c'est IE qui fait des siennes... au pire, fait comme moi, opte pour un design extensible

Bonne continuation

Spiky

8 avril 2006 à 10:20:30

Tu dois jouer avec les padding et les margin parce que IE à tenance à mal les interpreter

JVAlex

8 avril 2006 à 13:46:38

Ok, merci, mais le problème c'est qu'après ça risque de tout niquer sous Firefox...
C'est vraiment bizarre ce genre de trucs.

Dommage, et merci encore

Je ne coche pas la case "problème résolu", car si quelqu'un a une solution, je la prends toujours !

Ejis

8 avril 2006 à 13:58:52

Moi-aussi, j'ai ce problème sur mon site... Mais bon, est-ce que c'est si grave que ça?

Enfin, vu que 85% utilisent IE, il est vrai que la majorité ne pourra pas profiter de la disposition de manière parfaite, mais bon, je préfère m'en accomoder, étant donné que IE est le seul à faire ce genre d'erreur.

En clair, je crois qu'on en a un peu marre du handicap que provoque IE. C'est à cause des lacunes de ce navigateur qu'on ne peut pas pleinement profiter des superbes possibilités de la CSS.

Vous allez me dire que c'est un troll, mais bon, j'assume ce que je viens de dire.

Ben dans mon cas, j'ai aussi joué avec margin et padding. Margin, c'est bon, mais padding, IE ne veut rien savoir...

Le mieux serait de pouvoir faire des concessions en te disant que seul IE aura cette erreur, aussi horrible soit-elle... Mais bon, ras-le-bol de ne pas pouvoir profiter pleinement de la CSS parce-que M$ ne peut pas faire de rentes avec un navigateur.

Veuillez m'excuser pour ce message...

JVAlex

8 avril 2006 à 14:12:42

Pas besoin de t'excuser...
IE non plus ne veut pas des paddings chez moi, mais comme plus des trois quarts des internautes le possèdent, j'ai préféré m'y conformer plutôt que ce ne soit lui qui le fasse.

J'ai donc supprimé le bouton "Effacer" qui ne servait pas à grand chose et j'ai mieux réglé le tout pour que ça aille sur IE.
Le seul problème, c'est que ce n'est plus centré sur Firefox (et surement les autres), mais bon, j'ai essayé de doser un peu pour que ça soit le mieux possible sur les deux.

Voilà, problème résolu cette fois, enfin même s'il ne le sera que quand la version 7.0 d'IE sortira.