[IE] width et margin:auto sur BODY

31 mai 2007, 14:53

Salut à tous !

Je rencontre un problème qui fait hérisser les cheveux !

Prenons le code suivant:

<html>
	<head>
		<title>Titre</title>
		<link rel="stylesheet" href="/style.css" type="text/css" />
	</head>
	
	<body>
		<div id="gauche">
			gauche
		</div>
				
		<div id="droite">
			droite
		</div>
	</body>
</html>

et dans style.css :

Code : Tout sélectionner

body
{
	width:750px;
	margin:auto;
	margin-top:5px;
	margin-bottom:5px;
}

#gauche
{
	float:left;
	width:220px;
	border:1px solid black;
}

#droite
{
	border:1px solid black;
	float:right;
}

Tout est OK sous Firefox, mais sous IE, ça ne fonctionne pas tout le temps ! J'ai un site sur lequel ça fonctionne (xxxxx) mais un autre sur lequel çà ne fonctionne pas.
Sous IE, sur le second site, le body a une largeur de 100% alors que je lui ai spécifié 750px !

Voyez-vous ce qui pose problème ? Je m'arrache les cheveux dessus depuis des heures, sans trouver ce qui diffère (les propriétés du body sont exactement les mêmes sur les 2 sites ...).

Ca serait super cool si vous pouviez m'aider !

Merci par avance,
Flo.

03 juin 2007, 11:44

Ca n'inspire personne ?

03 juin 2007, 12:05

Ton problème avec IE est classique : la dimension sur body n'est pas prise en compte. Donc il faut ajouter un conteneur auquel tu peux donner des dimensions.

Mais ce sera insuffisant et le centrage sous IE avec "margin: auto" ne foncitonnera pas non plus. il faut donc ruser pour centrer :
-1- positionner le conteneur en relatif;
-2- positionner le coté gauche du conteneur à 50%;
-3- ajouter une marge négative à gauche au conteneur de la moitié de sa propre largeur;

ça donne ceci :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Titre</title>
    <link rel="stylesheet" href="./style.css" type="text/css" />
    <style type="text/css">
    /* <![CDATA[ */
    #contenu
    {
        position: relative;
        top: 0;
        left: 50%;
        width:750px;
        margin-left: -375px;
        margin-top:5px;
        margin-bottom:5px;
    }
    #gauche
    {
        float:left;
        width:220px;
        border:1px solid black;
    }
    #droite
    {
        border:1px solid black;
        float:right;
    }  
    /* ]]> */
    </style>
  </head>
  <body>
    <div id="contenu">
      <div id="gauche">
        gauche
      </div>
      <div id="droite">
        droite
      </div>
    </div>
  </body>
</html>

03 juin 2007, 12:11

Merci beaucoup pour ta solution, je regarde ça cet après-midi

Par contre, peux-tu aller jetter un coup d'oeil sur le premier site que je donne dans mon post (mon portfolio) ? Car j'ai utilisé la méthode width et margin:auto sur body et ça passe sous IE ! Je ne comprend vraiment pas pour le coup ...

03 juin 2007, 12:40

Juste une question, je me suis mis au CSS aussi. Ce bug, c'est pour IE 6 ou pour le 7 aussi ?
(Je suis sur mac, sous firefox ça passe bien, et j'ai pas de IE pour tester

)

03 juin 2007, 12:42

Juste une question, je me suis mis au CSS aussi. Ce bug, c'est pour IE 6 ou pour le 7 aussi ?
(Je suis sur mac, sous firefox ça passe bien, et j'ai pas de IE pour tester )

IE7, je ne sais pas pour IE6 (mais très peu de personnes l'utilisent encore, donc pas grave).

03 juin 2007, 13:00

Juste une question, je me suis mis au CSS aussi. Ce bug, c'est pour IE 6 ou pour le 7 aussi ?
(Je suis sur mac, sous firefox ça passe bien, et j'ai pas de IE pour tester )
IE7, je ne sais pas pour IE6 (mais très peu de personnes l'utilisent encore, donc pas grave).

Je dois donc faire partie des personnes "pas grave" tout comme encore bon nombre de la population qui ne sait même pas ce qu'est une mise à jour windows...

03 juin 2007, 13:12

Oui mais bon vu que déjà le code normal n'est pas compris pas IE7, que t'ais IE6 ne changera rien au problème, ça marche sur aucun des deux

03 juin 2007, 13:14

lol, la bande de "pas grave" est surtout constituée de gens ayant des versions de Windows "tombées de camion" qu'il est difficile voire impossible de mettre à jour et donc sur lesquels on ne peut pas passer à IE7

Quoiqu'il en soit, j'ai testé sous IE7 et autant le site indiqué en ligne fonctionne bien, ça se centre normalement. Mais pour le bout de code que je t'ai mis plus haut, ça ne fonctionnait pas sans passer par un conteneur à l'intérieur de <body>. CQFD.

03 juin 2007, 13:23

versions de Windows "tombées de camion" qu'il est difficile voire impossible de mettre à jour et donc sur lesquels on ne peut pas passer à IE7

C'est facilement faisable (et même via Windows Update) pour ceux qui connaissent les endroits où chercher

Quoiqu'il en soit, j'ai testé sous IE7 et autant le site indiqué en ligne fonctionne bien

Comment ça peut s'expliquer ça ? J'ai pourtant tout mis sur le body (comme undiqué dans mon premier post).

Edit: en tous cas, un grand MERCI pour ta solution qui fonctionne parfaitement!

[IE] width et margin:auto sur BODY

Qui est en ligne