Billets publiés en décembre 2008 ↓

Messieurs dames,

Pour changer un peu, 20cent me laisse les clés du blog afin d’exposer un problème CSS des plus pénibles, dû comme souvent à notre impayable compagnon d’infortune quotidien Internet Explorer (6 et 7).

Je l’ai rencontré aujourd’hui, je l’ai traité par les hacks traditionnels voire même les plus tabous (oui, oui, zoom:1) et j’ai finalement cherché de la doc sur le problème… sans résultat. Je me dis donc que je vais profiter de l’exceptionnel niveau des lecteurs de ce blog pour recueillir quelques bribes d’infos. N’hésitez donc pas !

The plot

Voilà donc un exposé rapide du problème (d’une simplicité enfantine du reste) :

• un lien block contient une image dans un span floaté + un texte
• le flux est absorbé à l’aide des méthodes habituelles MAIS :
• perte de focus sur l’image (si je clique sur le texte le lien marche, sur le fond le lien marche, mais sur l’image non)
• si je vire le float sur le span, ça remarche
• mais j’ai besoin du float !

Un petit exemple pratique

Une démo ici.

Le code du lien :

    <p>
      <a href="javascript:alert('ça clique.');" class="myLink">
        <span><img src="gni.png" alt="" /></span>
        <small>Mon lien avec image float:left</small>
      </a>
    </p>

Le span est mis en display:block avec une bordure qui change de couleur au rollover sur le lien et l’image encapsulée a elle-même une bordure de 3px.

La CSS relative :

.myLink{
  display: block;
  /* là je blinde de correctifs IE exprès \*/
  width: 300px;
  position: relative;
  overflow: hidden;
  zoom:1;
}
.myLink:hover, .myLink:focus{
  color: red;
}
.myLink span{
  float: left;
  margin-right: 10px;
  border: 1px solid #000;
}
.myLink span img{
  display: block;
  border: 3px solid #F7F3EA;
}
.myLink:hover span, .myLink:focus span{
  border-color: red;
}

On constate sur IE6 et IE7 la perte du cursor:pointer au roll sur l’image et le clic rendu inefficace.

Un exemple dans la vraie vie

Pour info, j’ai constaté ce même problème sur le site de lastFM : http://www.lastfm.fr/user/lastSTPo

Dans mes « amis » (colonne droite), on trouve les avatars d’amis et leur nom dans un lien : sous IE, cliquer sur le nom marche mais pas cliquer sur l’image…

Vos lumières

Voilà pour l’essentiel…

Si vous avez une ressource qui traite du problème, une idée, n’importe quoi : je prends !

Et puisque je suis là, bonne année à tous !

Et puisque je suis toujours là, allez donc lire l’article de Stéphane sur les popins, il utilise de nombreux termes 2.0 des plus seyants.

Bien à vous,

STPo