28173 sujets

CSS et mise en forme, CSS3

Salut à tous,
J'ai une petite question sur un bug que je rencontre actuellement.

Je fait des cadres à coin arrondis avec une structure comme celle ci :

<div class="top"></div>
<div class="corps">
</div>
<div class="bas"></div>

A chacun de ses div j'applique une image pour arriver à l'effet escompté (l'image du corps étant une image d 1px répétable).


.top
{
  width:500px;
  height:10px;
  background:url(top.gif) no-repeat;
}
.bas
{
  width:500px;
  height:10px;
  background:url(bas.gif) no-repeat;
}
.corps
{
 width:500px;
 min-height:100%;
 height:auto!important;
 background:url(bas.gif) repeat-y;
}


Tous marche très bien sauf sous ie6 ou le bord supérieur est décalé de 5px (de la moitié de sa hauteur pour être exact) vers le haut.
Je règle pour l'instant le pb en appliquant une margin-bottom:-5px uniquement sous ie6 mais j'aimerais comprendre d'ou vient le problème.

Merci
Modifié par grunky (22 Nov 2007 - 09:24)
Bonjour,

Par défaut, sous IE6, un div fait 14px de haut.
En ajoutant :
font-size:0
à .top et .bottom ça devrait s'arranger.
Modifié par mecho (21 Nov 2007 - 16:17)