Problème avec IE pour mon design

J'ai fait mon design qui est presque terminé mais :
Problème n°1 :

Sous Firefox mon design est correcte (le menu estbien à gauche, le corp de la page est à la meme hauteur du menu et est bien a droite. Mais j'ai voulu voir ce que ca fesais sur IE. Et la c'est le drame(le menu est à gauche mais les bordure sont toutes noire alors que j'ai mis groove : ca fait moche et le corp est en dessout du menu

. Comment si fait il??

Prblème n°2 :

Mon texte dépasse sur les coté alors que j'ai mis une marge à droite de 1000px o_O

. Est-ce qu'on pourrai me dire pourquoi il y a ça??

Voici mn code source pour mieux m'aidez :

<!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>Test</title>
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="design\design.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="en-tete">
</div>

<div id="menu_vertical">
|<a href="index.html" alt="L'acceuil du site"> Acceuil </a>|
<a href="forum.php" alt="Si vous voulez poser des question"> Forum </a>|
<a href="livre_or.php" alt="Mettez vos commentaire pour améliorer ce site"> Livre d'or </a>|
<a href="mailto:admin_voyage_hamm@hotmail.fr" alt="Pour me contacter"> Contact </a>|
</div>

<div id="menu">
<span class="haut_menu">Menu 1</span>
<a href="#" alt="#" class="element_menu">Bouton Lien 1</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 2</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 3</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 4</a>
</br>

<span class="haut_menu">Menu 2</span>
<a href="#" alt="#" class="element_menu">Bouton Lien 1</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 2</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 3</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 4</a>
<br/>

<span class="haut_menu">Menu 3</span>
<a href="#" alt="#" class="element_menu">Bouton Lien 1</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 2</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 3</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 4</a>
</br>

<span class="haut_menu">Menu 4</span>
<a href="#" alt="#" class="element_menu">Bouton Lien 1</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 2</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 3</a>
<a href="#" alt="#" class="element_menu">Bouton Lien 4</a>
</div>

<div id="corp">
<h1>Salut tous le monde et bienvenue dans mon nouveau site</h1> <p>chjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsitechjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsitechjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsitechjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsitechjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsitechjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsitechjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsitechjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsitechjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsitechjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsitechjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsitechjchjccjcghchchgchkgchkgchgkvchgkvghvhgvghvkkjhvhjvjhvhjjhvhjvhjvhvjhvhjvjhvjvhvhjvhjvhjvhjvhjvhjvhjvhjvhjvjhvhvkjhvhjvjhjgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghgggggggghhhhhhhhhhhhhhhhhrkjrhjkhhjgjhhhjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
</div>

<div id="pied">

</div>

</body>

Voici le css :

body
{

margin-top : 20px;
margin-bottom : 20xp;
background-color: #DCDADB;
width : 800px;
margin : auto;
}

#en-tete
{
margin-top : 20px;
float : center;
background-image : url(banniere.jpg);
background-repeat : no-repeat;
height: 150px;
width: 800px;
border: 3px groove black;
}

#menu_vertical
{
text-align : center;
border: 3px groove black;
color: #333333;
font-family: Georgia, "Times New Roman", Times, serif;
width: 800px;
height : 20px;
}

#menu
{
padding : 3px;
border: 2px groove black;
height : 520px;
color: #333333;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
float : left;
width: 195px;
}

.haut_menu
{
background-image: url(menu_haut1.jpg);
background-repeat: no-repeat;
height: 25px;
text-indent : 50px;
line-height : 25px;
font-size: 13px;
float : left;
width: 195px;
margin-top : 5px;
}

.element_menu
{
background-image: url(menu_case1.jpg);
background-repeat: no-repeat;
height: 25px;
width: 195px;
text-indent : 50px;
line-height : 25px;
font-size: 10px;
float : left;
color: #333333;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
}

.element_menu:hover
{
background-image: url(anim1_menu.gif);
background-repeat: no-repeat;
height: 25px;
width: 195px;
text-indent : 50px;
line-height : 30px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
color: #333333;
text-decoration: none;
float : right;
}

#corp
{
width : 586px;
margin-left : 210px;
padding : 3px;
border: 2px groove black;
color: #333333;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
white-space : normal;
margin-right : 1000px;
}

#pied
{
text-align : center;
}

J'èspere que vous pourrai m'aider

Deuxième problème résolu (je crois que c'est parcequ'il n'y avait pas d'espace.

EPonix

4 septembre 2006 à 8:13:29

Skit

4 septembre 2006 à 8:59:57

il me semble que j'avais une blague aussi avec le style de la bordure: firefox ne m'acceptait ma bordure qu'en CSS mais MSIE ne me l'acceptait que définie dans la balise... Maintenant c'était une table donc j'ignore si MSIE reconnaît avec un div mais logiquement oui
essaie le style de bordure dans le div pour voir et dans le css

ça fait moche et ça pourrit le code mais euh j'ai rien de mieux à proposer

4 septembre 2006 à 10:37:31

alors je vais devoir dire que pour voir mon site correctement il faudra prendre firefox

jp949

4 septembre 2006 à 10:41:07

Le probleme est que IE n'interprete pas les styles de bordures correctement que ce soit groove dotted outer etc...

4 septembre 2006 à 11:07:42

alors ca sera moche mais le plus gros problème c'est comment mettre le corps de la page au meme niveau que le menu??

4 septembre 2006 à 11:16:56

tu as 2px de trop dans tes dimensions pour IE a savoir que Ie ajoute une marge de 3px sur les elements adjacents des flottants. ce qu'on appelle "3px jog".
tu vois la solution? Diminuer un des 2 blocs de 3px

4 septembre 2006 à 11:25:52

Ca ne marche toujours pas (a part si je met 500 px)
Les bordure des menu sont tres large (trop large) et meme si je met margin-right ca ne marche pas.

et un autre problème avec mon texte

Problème avec IE pour mon design

Supprimer

Modérer

Signaler le message aux modérateurs