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.

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

++

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

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)

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; 
      /* --- */
         }

@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 )

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)

@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.