Probleme de code css sous IE

Et je trouve pas :(

Sujet résolu

16 décembre 2005 à 23:26:43

Bonjour, j'ai un probleme de design sous IE, je m'explique:

j'ai trois images, un head, un menu et un corps.

Je place mon head sans probleme, ainsi que le menu avec un

Float: left;

mais lorsque je met mon corps sur Firefox et bien c'est impecable, pas de soucis, le problème viens de...vous l'aurez deviné "Internet Explorer". En fait, en plein écran ça peu aller sauf un léger décalage entre le menu et le corps (ce que je ne veux pas).

Mais lorsque l'on diminue la taille de la fênetre et bien le corps se décale sous le menu.

Ci-Dessous, respectivement l'index.php et le css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>

<title>PozPc</title>

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


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

<body>
<div id="head">
</div>

<div id="menu">
</div>

<div id="corps">
</div>

</body>
</html>

/* CSS Document */
body
{
width: 800px;
height: 600px;
margin: 0;
margin: auto;
}

#head
{
width: 800px;
height: 172px;
background-image: url(../images/head.jpg);
background-repeat: no-repeat;
padding: 0px;

}

#menu
{
float: left;
width: 178px;
height: 428px;
background-image: url(../images/menu.jpg);

}

#corps
{
margin-left: 178px;
background-image: url(../images/centre.jpg);
width: 622px;
height: 428px;
clear: both;
}

Ou alpors, quand je modifie, le corps est décalé a droite et sous le menu, et tjs pas sur firefox :euh:

Je tiens à preciser que avant de poster j'ai chercher (surement pas convenablement, je peu le consevoir, mais je l'ai fait) et malgré des problèmes à peu pres similaire pas de solution, même un clear: both;

D'avancer merci je galere depuis un moment.

le_stoppeur

16 décembre 2005 à 23:38:32

Je ne vois pas à quoi sert le clear:both; dans ton corps, essaie plutôt un float: right;, et regarde ce que ca te donne, et ajuste les margin en fonction

klesk

16 décembre 2005 à 23:55:59

Bon alors, voila la bonne blague du jour (moi ca me fait pas rire mais bon)

avec ce code css:

/* CSS Document */

body
{
width: 800px;
margin: 0;
margin: auto;
}

#head
{
width: 800px;
height: 172px;
background-image: url(../images/head.jpg);
background-repeat: no-repeat;
padding: 0px;

}

#menu
{
float: left;
width: 178px;
height: 428px;
background-image: url(../images/menu.jpg);
clear: right;
}

#corps
{
background-image: url(../images/centre.jpg);
width: 622px;
height: 428px;
float: right;
clear: left;
}

Et bien maintenant ca fait l'effet inverse, enfin ca marche impec sous IE et le menu est décalé sous Firefox, je capte plus rien, help please.

Merci

jp949

17 décembre 2005 à 5:43:30

Il faut diminuer la largeur d'un block ou augmenter le body de 2px, tu es trop juste pour passer avec des float

klesk

17 décembre 2005 à 12:49:38

merci de ton aide jp949, mais ça ne change rien.

Ce que je comprend pas c'est pourquoi, une foit c'est firefox qui fait des truc bizzard une foit c'est IE.

c'est pas possible d'obtenir le meme resultat sur IE et Firefox avec le meme code ??

jp949

17 décembre 2005 à 13:53:51

supprime le clear dans #corps

klesk

17 décembre 2005 à 13:57:56

Cool merci ca a fonctionner. Il me semblai avoir tester quelque chose du genre mais a prioris non, encore merci a toi