[Résolu] [XHTML & CSS] Mon menu a un mauvais positionnement sous Internet Explorer - Et ça m'énerve ! - page 1

Bonjour à toutes et à tous !

Voici qu'il m'arrive un petit problème assez agaçant dû à cet incroyable browser qu'est Internet Explorer : en effet, j'ai créé une page conforme aux normes où j'ai voulu placer un menu sur la gauche, le corps du texte étant à droite (un peu comme sur ce site). D'ailleurs je tiens à remercier les auteurs des tutoriaux pour ZérOs qui m'ont énormément servi.

Fervente utilisatrice de Firefox, c'est donc sous ce logiciel que j'ai testé le rendu de ma page : aucun souci, tout passait très bien. J'ai quand même décidé de tester sous IE car ses utilisateurs sont encore nombreux (malheureusement...) et là oh ! Stupeur mon menu n'était plus du tout à sa place !

Voici donc ce que ça me donne :

Pour Firefox :

Pour Internet Explorer:

Vous vous en rendez compte, l'effet n'est pas du tout le même...J'aimerais savoir si l'un d'entre vous a la solution pour que l'affichage soit le même dans les deux explorateurs.

Je vais vous joindre le code de ma page :

<!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">
<head>


<meta name="author" content="Stobierski Marie" />

<meta name="description" content="Voici un site web consacré aux trains de lorraine et aux infrastructures du réseau ferrovière lorrain. Vous y trouverez de nombreuses photos de trains métrolor, de fret ou de transport grande lignes, ainsi que de nombreuses informations sur le matériel roulant, l'équipement ferroviaire, ou encore le TGV Est Européen." />

<meta name="keywords" content="trains, lorraine, matériel roulant, photos trains, gare, métrolor, réseau lorrain, TGV Est Européen, TGV, motrice, fret" />

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>Trains de Lorraine - Accueil</title>
<script type="text/javascript">

</script>

<link title="style1" media="screen" rel="stylesheet" href="styles/basicstyle.css" type="text/css" />
</head>

<body>

<div id="entete">

<br />
</div>

<div id="menu">

<h4>Menu</h4>
<dl>
<dt onclick="javascript:montre();">
<a href="accueil.html">Accueil</a>
</dt>
<dt onclick="javascript:montre();">Les Niouses</dt>
<dt onclick="javascript:montre('sousmenu');">Galerie Photos</dt>

<dd id="sousmenu">
<ul>
<li>Par types de train</li>
<li>Par gares</li>
<li>Par date</li>
</ul>
</dd>

<dt onclick="javascript:montre();">Fiches trains</dt>
<dt onclick="javascript:montre();">Réseau Lorrain</dt>
<dt onclick="javascript:montre();">Dépôt Lorrains</dt>
<dt onclick="javascript:montre();">Technique Ferroviaire</dt>
<dt onclick="javascript:montre();">TGV Est Européen</dt>
<dt onclick="javascript:montre();">Les Métiers du Train</dt>
<dt onclick="javascript:montre();">Liens</dt>
<dt onclick="javascript:montre();">Contact</dt>
<dt onclick="javascript:montre();">L'auteur</dt>
</dl>

</div>

<div id="corps">

<h1>Accueil</h1>
<br />
<br />

</div>

<div id="pieddepage">

<p>www.trainsdelorraine.net - Trains De Lorraine - Marie Stobierski - 2006© tous droits réservés
<br />
Toutes les photos de ce site sont soumises aux droits d'auteur.</p>

</div>
</body>
</html>

Ainsi que le CSS :

body {
background-image: url(../images_communes/fond.jpg);
margin-top: 5px;
margin-bottom: 5px;
}

/*balises d'en-tête*/

#entete {
margin: auto auto 50px;
background-image: url(../images_communes/logo1.gif);
background-repeat: no-repeat;
height: 220px;
width: 600px;
}

.lecteur {
width: 200px;
height: 20px;
margin-left: 200px;
margin-top: 220px;
}

/*balises du menu*/

#menu {
border: 1px solid black;
background-color: #d1dcff;
background-image: url(../images_communes/test.png);
background-repeat: repeat-x;
width: 13%;
float: left;
margin-left: 5px;
margin-right: 5px;
text-align: center;
}

h4 {
text-align: center;
font-family: Arial,serif;
color: #6a75db;
}

dl {
font-family: Arial,serif;
font-size: small;
line-height: 150%;
}

#sousmenu {
background: white none repeat scroll 0%;
display: none;
text-align: left;
font-family: Arial,serif;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
}

#menu a {
color: black;
text-decoration: none;
}

#menu a:hover {
color: white;
text-decoration: none;
}

#menu dd {
margin: 0px;
}

#sousmenu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: x-small;
}

#sousmenu li:hover, #menu dt:hover {
background-color: #6a75db;
color: white;
cursor: pointer;
}

/*balises du corps*/

#corps {
border: 1px solid black;
padding: 5px;
background-image: url(../images_communes/fondcorps.jpg);
width: 84%;
margin-left: 15%;
min-height: 450px;
}

#corps100 {
border: 1px solid black;
padding: 5%;
background-image: url(../images_communes/fondcorps.jpg);
width: 90%;
min-height: 450px;
margin: auto;
}

h1 {text-align: center;
text-align: center;
font-family: Papyrus,Verdana,Arial,serif;
font-size: 40px;
color: #434e93;
}

a img {border: none;
}

.flottant_gauche {
float: left;
}

.flottant_droit {
float: right;
}

.ligne {
clear: both;
}

.description {
font-style: italic;
font-weight: bold;
}

.center {
text-align: center;
}

.liens_galerie {
width: 33%;
position: static;
margin-right: 33%;
margin-left: 33%;
}

#galerie {
list-style-image: url(../images_communes/fleche.gif);
}

.entrer a, .liens_galerie a {
text-align: left;
font-size: x-large;
font-family: Papyrus,Verdana,Arial,serif;
color: #6a75db;
text-decoration: none;
font-weight: bold;
}

.entrer a:hover, .liens_galerie a:hover {
text-decoration: underline;
}

#pieddepage {
margin: auto;
width: 80%;
text-align: center;
font-size: small;
}

Merci à tous !

[XHTML & CSS] Mon menu a un mauvais positionnement sous Internet Explorer

Et ça m'énerve !

[XHTML & CSS] Mon menu a un mauvais positionnement sous Internet Explorer

Supprimer

Modérer

Signaler le message aux modérateurs