18073 sujets

Questions générales et questions de débutants

Sur firefox, balise h3 qui pousse le header en bas

Bonjour,

Je suis débutant en CSS et je suis en train d'effectuer quelques tests pour me familiariser avec. Seulement j'ai un petit soucis qui est peut etre simple à résoudre pour un expert, en gros, quand je met un titre dans le header, ce dernier est décalé vers le bas de quelques pixels, uniquement sur Firefox, sur IE tout va bien.

Voici le code:


body {
margin: 0;
padding: 0;
text-decoration: none;
font-family: arial;
font-size: 9pt;
}

input {
padding-left: 1px;
padding-right: 1px;
font-family: arial;
font-size: 9pt;
width: 100px;
border: 1px solid black;
}

.h3 {
font-size: 14pt;
font-weight: bold;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}


#main_container {
position:absolute;
left: 50%;
top: 0;
width: 750px;
margin-left: -375px; /* moitié de la largeur */
/*margin-top: -200px; /* moitié de la hauteur */
background-color: #cdcdcd;
padding: 0;
}

#header {
width: 100%;
height: 50px;
background-color: #187BC0;
}

#menu {
width: 100%;
height: 25px;
background-color: #8800FF;
}

#content {
width: 100%;
height: 400px;
background-color: #CECECE;
}

#footer {
width: 100%;
height: 50px;
background-color: #187BC0;
}





<body>
<div id="main_container">
  <div id="header">
  	<h3 class="h3">Gestion des matières</h3>
  </div>
  <div id="menu"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>
</body>


Le problème c'est qu'en supprimant le titre, "Gestion des matières", le header est bien collé au top du container, dès que je mets le titre en H3, il est décalé vers le bas.

Merci d'avance!
À vue de nez, il s'agit d'un problème lié à la fusion des marges entre l'élément (h3) et son parent.

Voir blocs imbriqués et fusion des marges pour plus d'informations et les solutions qui vont bien.

Si ça ne pose pas de problème graphiquement parlant, un petit padding-top: 1px; sur le bloc parent devrait suffire.
mpop a écrit :

Si ça ne pose pas de problème graphiquement parlant, un petit padding-top: 1px; sur le bloc parent devrait suffire.


effectivement cela a résolu le problème.
Dans le cas actuel ça ne pose aucun problème graphiquement, j'espère que dans le futur ce ne sera pas le cas .

Merci bcp.
Sujet clos
Aller à