Bug design avec IE

11 février 2006 à 0:45:45

Hello, j'ai un problème de design avec Internet explorer, alors que sous FF tout va bien,
voila mon code XHTML:

<!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">
<head>
<title> Mon site </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>

<div id="en_tete">

</div>


<div id="menu">

<div class="menu_horizontal">
<ul>
<li class="bouton_gauche"><a href="acceuil.php" title="Retournez sur la page d'acceuil">Acceuil</a></li>
<li class="bouton_gauche"><a href="chat.php" title="Venez parlez en direct">Chat</a></li>
<li class="bouton_gauche"><a href="forums.php" title="Accéder aux forums">Forums</a></li>
<li class="bouton_gauche"><a href="livreor.php" title="Signez notre livre d'or">Livre d'or</a></li>
<li class="bouton_gauche"><a href="aide.php" title="Comment utiliser le site ?">Aide</a></li>
<li class="bouton_droit"><a href="connexion.php" title="Connecter vous avec votre compte">Se connecter</a></li>
<li class="bouton_droit"><a href="inscription.php" title="Inscrivez-vous">S'inscrire</a></li>
</ul>
</div>



<div class="menu_vertical">
<h3>Titre 1</h3>
<ul>
<li><a href="" title="">Lien</a></li>
<li><a href="" title="">Lien</a></li>
</ul>
</div>
<div class="menu_vertical">
<h3>Titre 1</h3>
<ul>
<li><a href="" title="">Lien</a></li>
<li><a href="" title="">Lien</a></li>
</ul>

</div>

</div>


<div id="corps">
<p> Blablabla contenu de la page</p>
</div>


<div id="copyright">
<p> Copyright © Monsite 2006, tous droits réservés. <br/>
Toute reproduction totale ou partielle du contenu de ce site est interdite sans l'accord de l'auteur.</p>
</div>

</body>
</html>

Et mon code CSS :

body
{
width:760px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
background-color: rgb(44,72,92);
}

#en_tete
{
width: 760px;
height: 100px;
margin-bottom:5px;
background-image: url("logo2.png");
background-repeat: no-repeat;
}

#menu
{
float:left;
width:120px;
}

.menu_horizontal
{
width: 760px;
height: 30px;
margin-top: 5px;
border: 1px solid;
background-color: white;
}

.menu_horizontal li
{
padding: 0 10px;
line-height: 30px;
display:inline;
}

.menu_horizontal ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

.bouton_gauche
{
float: left;
border-right: 1px solid;
}

.bouton_droit
{
float: right;
border-left: 1px solid;
}

.menu_vertical
{
background-color: white;
border: 1px solid;
margin-bottom:7px;
margin-top: 7px;
}

.menu_vertical ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
list-style-type: none;
}

#corps
{
margin-top:50px;
margin-left: 127px;
margin-bottom: 10px;
padding: 5px;
background-color:white;
border: 1px solid black;
}

#copyright
{
text-align:center;
border:solid 1px;
background-color:white;
font-size:small;
margin-left:130px;
}

Le corps de la page se retrouve en dessous du menu a gauche, l'erreur se trouve au niveau du menu horizontal car quand je le supprime tout va bien...
A l'aide svp, je trouve pas la solution

ps : Ce sont des codes simplifié.

Anonyme

11 février 2006 à 0:56:02

On pourrait avoir une url ?

kriekus

11 février 2006 à 0:57:17

Ben y'es pas en ligne

le_stoppeur

11 février 2006 à 1:02:11

Je ne sais pas ce qui m'arrive, c'est sans doute mon jour de bonté, mais voilà une url, je l'ai mis en ligne pour toi

--> http://tiretdu8.xooit.net/sdizoud/

EDIT: Oui, j'ai pas le logo :-°

J'ai essayer de chercher d'où ça pouvait venir, je n'ai pas trouvé...

kriekus

11 février 2006 à 1:04:30

Merci, très sympa

, reste plus qu'à trouver le hic, t'as pas une idée?

EDIT : C'est pas grave pour le logo, c'est un logo bidon.

le_stoppeur

11 février 2006 à 1:21:25

J'ai pas encore réussi à trouver d'où ça venait, mais j'ai deux trois trucs à dire au niveau du code XHTML.

Tu fais ça:

<div class="menu_horizontal">
<ul>
<li class="bouton_gauche"><a href="acceuil.php" title="Retournez sur la page d'acceuil">Acceuil</a></li>

<li class="bouton_gauche"><a href="chat.php" title="Venez parlez en direct">Chat</a></li>
<li class="bouton_gauche"><a href="forums.php" title="Accéder aux forums">Forums</a></li>
<li class="bouton_gauche"><a href="livreor.php" title="Signez notre livre d'or">Livre d'or</a></li>
<li class="bouton_gauche"><a href="aide.php" title="Comment utiliser le site ?">Aide</a></li>
<li class="bouton_droit"><a href="connexion.php" title="Connecter vous avec votre compte">Se connecter</a></li>
<li class="bouton_droit"><a href="inscription.php" title="Inscrivez-vous">S'inscrire</a></li>

</ul>
</div>

Mais

<ul class="menu_horizontal">
<li class="bouton_gauche"><a href="acceuil.php" title="Retournez sur la page d'acceuil">Acceuil</a></li>

<li class="bouton_gauche"><a href="chat.php" title="Venez parlez en direct">Chat</a></li>
<li class="bouton_gauche"><a href="forums.php" title="Accéder aux forums">Forums</a></li>
<li class="bouton_gauche"><a href="livreor.php" title="Signez notre livre d'or">Livre d'or</a></li>
<li class="bouton_gauche"><a href="aide.php" title="Comment utiliser le site ?">Aide</a></li>
<li class="bouton_droit"><a href="connexion.php" title="Connecter vous avec votre compte">Se connecter</a></li>
<li class="bouton_droit"><a href="inscription.php" title="Inscrivez-vous">S'inscrire</a></li>

</ul>

serait mieux.. Oui, je sais, je chipote, mais c'était une remarque

Sinon, pour ton problème, je suis sûr que c'sst un problème de largeur... Met la largeur de ton body à 780px ou à 800 pour voir...

kriekus

11 février 2006 à 1:27:59

Oui tu as raison, j'avais pas vu je corrige ça tout de suite

Je sais pas si c'est un problème de largeur mais c'est sur que c'est le menu horizontal qui cloche...

EDIT : C'est bon merci, en effet si j'augmente la largeur du body de 5px c'est bon, allez savoir pourquoi, vive IE !!!:D Merci pour ton aide.

le_stoppeur

11 février 2006 à 1:32:36

Essaie avec body 780px;, et rétrécis le menu...

Reagarde ce que ça donne.. Chez moi ça fait remonter le corps, mais il y a un autre bug... Regarde ce que ça fait chez toi...

kriekus

11 février 2006 à 1:35:14

Mouarf fausse alerte, le coprs remonte mais pas le texte...

EDIT : :'(

Help je trouve paaas...

kriekus

12 février 2006 à 0:39:12

Un petit up please

EDIT : problème résolu, j'ai du changé le <div id="menu"> de place et le placé en dessous du <div class="menu_horizontal">, voila si jamais ça arrive a quelqu'un