Problème de 'overflow: hidden' sous IE7

Bonjour à tous,

Je me permet de venir vous solliciter à propos d'un bug d'IE7 pour lequel je ne trouve aucun 'trick'.

Mise en situation :

Je fais une sorte d'apercu de galerie ou j'ai des liens de taille fixe (80px * 80px) dans lesquels je met des images plus grandes afin d'avoir un apercu de l'image. Le css général donne :

a{
  float: left;
  display: inline;
  width: 80px;
  height: 80px;
  margin-left: 9px;
  margin-top: 4px;
  margin-bottom: 3px;
  overflow: hidden;
}

a img{
  position: relative;
  top: -50%;
  left: -50%; 
  max-width: 250px;
  max-height: 250px;
}

Sous IE6, FF et autres navigateurs respectables, pas de problèmes. Le rendu est parfait. Les problèmes commencent avec IE7 qui ne veut pas utiliser "overflow: hidden;" ... Résultat sous IE7 les liens sont agrandis à la taille des images et c'est vraiment affreu, tout se superpose, c'est le boxon.

Connaissez vous un "trick", une astuce pour remedier à ce problème ?

Je vous remercie pour votre aide.

Bonjour,

Le 'display:inline;' me semble bizarre pour l'élément 'a'. Un 'display:block;' me parait plus logique.
Le 'position:relative;' est aussi très étrange pour les images. Je pense qu'il serait plus correct de l'attribuer à l'élément 'a' et de mettre 'position:absolute;' pour les images.

Shunkin a écrit :

Le 'position:relative;' est aussi très étrange pour les images. Je pense qu'il serait plus correct de l'attribuer à l'élément 'a' et de mettre 'position:absolute;' pour les images.

La position relative me sert pour donner un apercu centré de l'image utilisé avec : top: -50%; left: -50%;

EDIT : Le display inline est un trick pour IE6 quand on utilise les margin sur un élément floatant donc je dois la garder
Je précise que sous IE6 et FF le rendu est nikel !
Modifié par pirquessa (17 Apr 2008 - 22:39)

Salut,

Je ne comprends pas tout le but de la manœuvre et certaines parties du bout de code mais bon
Essaye toujours:

a{
  float: left;
  display: inline;
  width: 80px;
  height: 80px;
  margin-left: 9px;
  margin-top: 4px;
  margin-bottom: 3px;
position: relative;
  overflow: hidden;
}

a img{
  position: absolute;
  top: -50%;
  left: -50%; 
  max-width: 250px;
  max-height: 250px;
}