[Résolu] Float qui marche pas sous IE ? - Problème de code sûrement par  - page 1

Bonjour à tous ! Je suis en train de faire une ébauche de site, et je me heurte déjà à un problème : en effet, je ne comprends pas pourquoi, en utilisant le code suivant, le menu et le corps sont côte-à-côte sous Firefox, mais l'un au-dessus de l'autre sous Internet Explorer. (Pourtant, M@teo ne parle pas d'incompatibilité des float avec IE dans son cours)...

Voila le code :

<!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>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design de base" href="design2/design_base.css" />
</head>

<body>

<div id="banniere">
</div>

<div id="menu">

<h1>Titre du menu</h1>

<div class="sous-menu">
<h2>Titre du sous-menu</h2>
<ul>
<li><a href="http://lien.fr">Lien n°1</a></li>
<li><a href="http://lien.fr">Lien n°2</a></li>
<li><a href="http://lien.fr">Lien n°3</a></li>
<li><a href="http://lien.fr">Lien n°4</a></li>
</ul>
</div>

<div class="sous-menu">
<h2>Titre du sous-menu</h2>
<ul>
<li><a href="http://lien.fr">Lien n°1</a></li>
<li><a href="http://lien.fr">Lien n°2</a></li>
<li><a href="http://lien.fr">Lien n°3</a></li>
<li><a href="http://lien.fr">Lien n°4</a></li>
</ul>
</div>
</div>

<div id="corps">
<p>ici le corps <br />
on va donc faire tout plein de texte pour faire l'impression que c'est rempli et créer le design en conséquences...
qsmldfj qmlsjf qsdmfj qmslkd fj<br /><br />
obn voila ça devrai aller mieux <br />
smdlfj</p>

</div>

<div id="footpage">

<p>et ici le pied de page</p>

</div>

</body>
</html>

Et le css qui va avec :

body
{
background-color: rgb(128,128,128);
width: 95%;
height: 95%;
padding: 10px;
}

#banniere
{
background-color: green;
background-image: url("image/banniere.jpg");
width: 450px;
height: 100px;
padding: 5px;
margin-left : 5%;
margin-top: 1%
}

#menu
{
background-color: blue;
float: left;
width: 17%;
margin: 1%;
padding: 5px;
}

#corps
{
background-color: red;
width: 80%;
margin: 1%;
margin-left: 20%;
padding: 5px;

}

#footpage
{
clear: both;
background-color: cyan;
width: 80%;
position: center;
margin: 1%;
padding: 5px;

}

Voici aussi un lien vers les images des résultats sous les différents navigateurs :
sous firefox
sous internet explorer

Comme vous pouvez le constater, sous IE le corps de la page plonge sous le menu, sans explication apparente, bien que cela soit sûrement dû au float du menu...

Comment puis-je faire pour remédier à ce problème ?

Voila, merci d'avance de vos réponses.

PS : on critique pas les couleurs, c'est juste une ébauche... t les id et class non définies ne le sont pas pour alléger le code css tout en gardant un contenu dans le menu...

24 juin 2006 à 15:23:32

Bilbou

24 juin 2006 à 17:57:34

Chu !

Essaie d'augmenter le margin-left du corps, si ça ne marche pas, réduit sa largeur...

Bonne soirée !

joe.tgg

24 juin 2006 à 18:52:00

Problème de marge connu sous IE. Essaye ce que t'as dis Bibou.

24 juin 2006 à 18:57:59

OK, j'essaie. Merci à vous.

Edit :

Exact, maintenant ça marche... Mais pourquoi est-ce que FF et IE n'ont pas la même définition de la largeur ? (il n'y a aucun espace entre mon menu et le corps sous IE, alors qu'il est trop grand sous FF)
C'est quand même bizarre...

re-edit : c'est bon, j'ai trouvé comment résoudre tous mes problèmes en farfouillant dans les tutos fait par les membres... Merci encore et bon code !

Float qui marche pas sous IE ?

Problème de code sûrement

Float qui marche pas sous IE ?

Supprimer

Modérer

Signaler le message aux modérateurs