28172 sujets

CSS et mise en forme, CSS3

Conteneurs div et hauteur vertical Chrome/Firefox

Bonjour,
Je recherche à faire un affichage de div qui se suivent les un en dessous des autres.
Sauf que voila, entre Chrome et Firefox le rendu n'est absolument pas pareil.

Dans chrome le div #content est placé sous le #header et déborder du wraper.

Je vous donne mon code de test:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor,  www.pspad.com">
 
  <title></title>
  <style type="text/css">
  html {margin:4px;}
 body
  { 
    height: 100%;
    margin: 0px;
  }
  #wrap
  { 
    background-color: green;
    position: relative;
    min-height: 100%
  }
  #header
  { 
    background-color: red;
    height: 140px;
  }
  #content
  { 
    background-color:blue;
  }
  #wrap, header
  {
    width: 100%;
  }
  #content
  {
    position: static;
    min-height: 100%;
    display:block;
    margin: 0px auto;
    /*margin-top:-140px;*/
  }
  #statusbar
  {
    background-color: gray;
    width:100%;
    position:absolute;
    bottom: 0;
  }
  
  #loginbox
  {
     position: absolute;
     width: 300px;        /* selon la largeur voulue */
     margin-left: -150px; /* moitie de width */
     left: 50%;           /* constant, toujours 50% */
     height: 120px;       /* selon la quantite de texte */
     margin-top: -60px;   /* moitie de height */
     top: 50%;            /* constant, toujours 50% */
     border: 1px solid #333;
     background-color: #eee;
     }
     
  </style>
  </head>
  <body>
     <div id="wrap">
          <div id="header">Header</div>
          <div style="clear: both;"></div>
          <div>
          <div id="content">
                   <div id="loginbox">LoginBox</div>
          </div>
          </div>
          <div style="clear: both;"></div>
          <div id="statusbar">&nbspStatusBar</div>
     </div>
  </body>
</html>

Je vous laisse faire des testes pour voir la différence.
Merci.
Modifié par Xarkam (20 Feb 2011 - 11:50)
Sujet clos
Aller à