←

→

Problème CSS IE : focus sur les images en float dans les liens

décembre 30th, 2008 | Réflexions

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

11 commentaires ↓

#1 Anonyme le 12.30.08 à 13:38

Bonjour, tu es qui « STPo » ?

#2 Frank Taillandier le 12.30.08 à 14:27

A défaut de t’aider à corriger ce bug, que j’ignorerais sciemment à ta place, je te rajoute dans mes friends sur LastFM et je reste zen.

#3 Stéphane Deschamps le 12.30.08 à 15:03

@Anonyme : STPo c’est Christophe Andrieu, un bien gentil intégrateur et très talentueux designeur web. (cf stpo.fr.

@STPo : Quelques idées en vrac, sans avoir testé mais bon, on peut pas être partout :

  1. essaie de mettre le float sur l’image seule

  2. essaie une position absolue dans une position relative

ça donne quoi tout ça ?

PS : l’exceptionnel niveau des lecteurs de ce blog… Espèce de fayot. :)

#4 Stéphane Deschamps le 12.30.08 à 15:05

Autre idée :

  1. faire un float sur le parent, et des float sur les enfants ? (en plus comme ça le lien fera une surface plus grande, et c’est bon pour la Loi de Fitts, ça, coco)
#5 Eric Le Bihan le 12.30.08 à 19:56

Pas de float sur le span ? (.myLink span)

#6 STPo le 12.30.08 à 20:19

@Anonyme : regarde les liens de la sidebar =)

@Frank : oui oui, c’est une position parfaitement honorable (de laisser IE dans sa merde), mais là je peux pas c’est vraiment bloquant : j’utilise une même structure pour des liens avec et SANS texte, dans ce dernier cas j’ai donc l’image seule comme élément à cliquer… s’il n’est pas cliquable sur IE, c’est quand même pas mal dommage !

@Stéphane :

  1. le float sur l’image seule marche effectivement (c’est ma solution dégradée actuellement), mais du coup on perd le span et sa bordure qui change de couleur au roll, ce qui m’ennuie (hors charte + moins intuitif). J’en restereai là si pas mieux.

  2. position absolue/relative donne les mêmes problèmes que le float.

  3. float sur les parents, même combat.

Sniff ! D’autres idées peut-être ? (Yves, t’es en vacances ? =D )

#7 Eric Le Bihan le 12.30.08 à 20:04

Manque la bordure noire…

J’ai essayé ça dis moi si c’est ok pour toi : 

      .myLink span{
         margin-right: 10px;
         border: 1px solid #000;
      }
      .myLink span img{
      float:left;
      /* --- */
          background-color:#F7F3EA;
            padding:1px;
            border: 1px solid #000; 
      /* --- */
         }

#8 STPo le 12.31.08 à 11:46

@Eric : je n’avais pas vu ta réponse… ça marche !

Je n’avais pas pensé à singer les bordures comme tu l’as proposé, honte à moi ! C’est vraiment le float sur le span qui met IE dans le vent pour une raison qui m’échappe toujours…

J’ai mis en ligne l’exemple ici.

Bref, merci Eric, merci les Intégristes, merci HtmlZenGarden, et bonne année ! (content)

#9 Gcyrillus le 01.07.09 à 1:45

bonjour,

cela n’aurait-il pas a voir avec le fait que l’attribut href ne contient qu’une instruction ‘JS’ ?

Logiquement on ferait : <a href="#" rel="nofollow">...</a>

l’attribut href valide et identifie la balise comme etant un lien valide l’attribut onclick, joue son role… et on peut simuler un « target ».

ha et pis Bonne année.

GC

#10 Gcyrillus le 01.07.09 à 17:58

Bonjour,

Je crois que l’explication n’est pas passé , je redevelloppe donc :) .

1) la boite alerte en javascript est supposé s’ouvrir sur l’événement « onclick » de la balise a , Il est illogique de transposé ou vouloir capturé un événement a l’aide d’un attribut qui definie une adresse WEB .

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

2) float , zoom , inline-block , etc … confere le layout dans IE (quasi identique a la notion de contexte de formatage pour les autres nav IE7 inclus) . Cet « etat » redefinie la position de l’element dans la page et ses propriété par défaut , d’ou l’absence du curseur qu’il faudra redefinir dans les régles CSS (sauf si on ne touche pas au layout ) Le curseur par défaut du lien ne sera pas hérité si l’on applique un zoom ou un inline-block … .

Dans le cas de ton exemple , tout ces éléments sont de type ‘inline’ , c’est assez trivial car un simple : ‘vertical-align:top’ aux span et a l’image , suffira a reproduire la mise en forme recherchée .

Voilou , j’espére t’avoir éclairé sur le pourquoi du comment de ce comportement spécifique d’IE … qui somme toute n’est pas vraiment un bug :)

++

#11 STPo le 01.09.09 à 14:37

1) Oui oui, je suis bien d’accord c’était juste pour faciliter la démo. Sur lastFM c’est bien des url dans le href, sur mon vrai site aussi. Aucune incidence donc !

2) Le curseur est effectivement « absent », mais le rajouter en CSS ne résoudra en aucun cas le véritable problème : un clic sur l’image restera inactif. Dans mon exemple tous les éléments ne sont pas inline mais block (afin d’étendre la surface « active »), vertical-align ne servira donc a priori à rien.

Si en revanche je mets l’image et le span inline, IE avale effectivement la dragée (la foule s’extasie), par contre les navigateurs « normaux » partent en sucette (le span n’étant pas inline, la bordure noire entoure « mal » l’image, le soulignement déborde). En hackant un peu ça doit pouvoir se résoudre… mais je vais garder la solution d’Eric, principalement parce qu’avec les éléments inline je perds le focus sur le background de mon lien : c’est mauvais pour la loi de Fitts sus-citée !

Merci pour ton intervention en tout cas, ta solution méritait le détour ! =)

Pour l’exemple je l’ai mise en pratique ici.

Laisser un commentaire

Mise en forme : vous pouvez utiliser la syntaxe Markdown. Vous verrez, c’est chouette !