28172 sujets

CSS et mise en forme, CSS3

Positionnement de bloc DIV different sous IE et Firefox

Bonjour,

Je peine sur un probléme (largement inspiré d'un exemple trouvé dans les tutoriaux) de comportement différent entre IE7 et Firefox concernant un positionnement de bloc div.
Dans le code ci-dessous le bloc gris contenant texte 1 est aligné sur le bloc vert contenant texte 2, enfin... il est aligné sous IE mais pas sous Firefox et je ne trouve pas pourquoi... Smiley confus

Si quelqu'un a une idée.... merci d'avance !

a écrit :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>

<div style="width:790px; margin:0 auto; border:3px solid;">
<div style=" border:1px solid;" >
BANDEAU HAUT
</div>

<div style="margin-top:10px; overflow:auto">

<div style="float:left; width:170px ; border:1px solid;">
<ul style="list-style: none; margin-left:5px ; margin-right:5px ; text-align:left; font-size:small ; padding-left:0px">
<li><a href="page1.html">menu 1 </a></li>
<li><a href="page1.html">menu 2 </a></li>
<li><a href="page1.html">menu 3 </a></li>
<li><a href="page1.html">menu 4 </a></li>
<li><a href="page1.html">menu 5 </a></li>
</ul>
<br />
</div>

<div style="width: 600px; margin-left:170px; border:3px solid; padding:0px">

<div style="width: 250px ;float:right; background-color: #669900 ;" >
<p> texte 1 </p>

</div>

<div style="background-color:#CCCCCC; width:350px ; margin-top:0px">
<p> texte 2 </p>
</div>

</div>
</div>


<div style="border:1px solid";>
FOOTER
</div>
</div>


</body>
</html>



Modifié par marcoFromLr (31 Jan 2009 - 12:03)
Salut MarcoFromLr,

Le décalage est dû à la balise <p> de tes paragraphes. Sous Firefox, il y a des marges automatiques qui n'existent pas sous IE.

Ainsi pour palier à ce problème, tu peux entrer le code suivant dans la partie <head> de ta page

<style type='text/css'>
   p
   {
   margin:0;
   }
  </style>


Et là, hop, plus de différences entre IE et FF. Par contre, tes paragraphes ne seront plus séparés comme avant (puisque tu mets une marge à 0).

Il est assez courant que des balises html classiques aient des propriétés différentes par défaut différentes selon les navigateurs (comme c'est le cas ici). Par exemple, les balises <form> des formulaires ont des marges par défaut sous IE et non sous Firefox...ce qui peux causer des décalages dans tes mises en page.

Bonne continuation.
Modifié par volonia75 (31 Jan 2009 - 14:58)
Sujet clos
Aller à