28173 sujets

CSS et mise en forme, CSS3

Probleme de float entre ie et firefox

bonjour j'ai un probleme typique entre ie et firefox :

upload/7945-firefox.JPG

upload/7945-ie.JPG

Xhtml :
<!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>Desifrance.com</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="DesiFrance.Com" href="styles.css" />
</head>

<body>
   <div id="page">
       <div id="banniere">
	   </div>
	   <div id="gauche">
	   Gauche
	   </div>
	   <div id="droite">
	   Droite
	   </div>
	   <div id="corps">
	   Corps <br/>
	   Corps <br/>
	   Corps <br/>
	   Corps <br/>
	   </div>
	   <div id="bas">
	   Bas
	   </div>
	   
   </div>
</body>


Css :
body
{
 font-family: Trebuchet MS, Verdana, Arial, sans-serif;
 background: #F1EFE2;
 width: 910px;
 margin: auto;
 margin-top: 10px;
 margin-bottom: 10px;
}

#page
{
 width: 900px;
 background: #FFFFFF;
 padding: 5px;
 margin: 0px;
}

#banniere
{
 width: 900px;
 height: 170px;
 background: url('images/banniere.jpg');
 margin-bottom: 5px;
}

#gauche
{
 float: left;
 width: 143px;
 margin: 0px;
 border: 1px solid #000; 
 margin-right: 5px;
}

#droite
{
 float: right;
 width: 193px;
 margin: 0px;
 border: 1px solid #000; 
 margin-left: 5px;
}

#corps
{
 width: 548px;
 margin: 0px;
 margin-left: 150px;
 margin-right: 200px;
 border: 1px solid #000; 
}

#bas
{
 clear: both;
 width: 898px;
 border: 1px solid #000; 
 margin: 0px;
 margin-top: 5px;
}


le problem c'est que dans ie le div "corps" ne monte pas en haut...
#corps
{
 width: 548px;
 margin: 0px;
 margin-left: 150px;
 margin-right: 200px;
 border: 1px solid #000; 
}

Le div#corps a une largeur spécifiée. Il sera donc, pour Internet Explorer Windows, doté de HasLayout (cf. Le concept de hasLayout dans IE/Win) et ne peut pas être survolé par un flottant. Or, les marges (ici gauche et droite) font partie de la boîte définie par div#corps. Les flottants ne peuvent donc pas se placer sur ces marges, et le bloc est repoussé.

Deux solutions :
- soit on ne précise pas de dimmension pour le bloc, et on le laisse se dimmensionner en fonction des marges gauche et droite qu'on lui donne (cf. cet exemple) ;
- soit on ne donne pas de marge mais on crée un contexte de formatage avec un overflow:auto ou un overflow:hidden, à doubler pour Internet Explorer Windows d'une propriété qui confèrera le layout au bloc, afin d'émuler ce comportement.

La première n'est pas forcément optimale, mais elle sera sans doute plus simple à mettre en place pour toi (pas besoin de commentaires conditionnels, ni de potasser le HasLayout). Smiley smile
Sujet clos
Aller à