28220 sujets

CSS et mise en forme, CSS3

Zone cliquable : contourner l'incompatibilité d'IE ?

Bonsoir,

Je viens de me rendre compte d'un bug supplémentaire d'IE et je vous avoue qu'il m'embête au plus haut point car le site sur lequel je bosse est quasiment terminé ormis ce bug.
Rien de tel qu'une age démo pour expliquer mon problème : http://toto.free.fr/alsa/zone-cliquable.php

Voici le code CSS :

    #global {
       height: 400px;
       width: 600px;
       background-color: blue;
    }
    
    #zone {
       position: absolute;
       top: 100px;
       left: 100px;
       width: 100px;
       height: 100px;
       background: yellow;
    }
    
    #zone a {
       display: block;
       width: 100%;
       height: 100%;
    }


Et le code HTML correspondant :

  <div id="global">
  
    <div id="zone">
      <a href="#"></a>
    </div>
  
  </div>

Le carré jaune est en fait un lien vers une autre page.
Malheureusement, ce code ne fonctionne que sous Mozilla et Cie, Opera et Safari. Sous Internet Explorer, le lien n'est pas reconnu comme remplissant toute la zone jaune et le carré n'est pas cliquable.

Existe-t-il un moyen d'outre-passer ce bug ?

Merci Smiley smile
Modifié par EcliptuX (19 Dec 2006 - 16:25)
Mince alors !!!
Je viens de tester avec un autre ordi muni d'IE et en effet, ça marche...
C'est d'autant plus étrange car j'avais entendu parlé d'un bug de ce style là avec IE.
Je vais regarder ça de plus près.
EcliptuX a écrit :
Mince alors !!!
Je viens de tester avec un autre ordi muni d'IE et en effet, ça marche...
C'est d'autant plus étrange car j'avais entendu parlé d'un bug de ce style là avec IE.
Je vais regarder ça de plus près.

Testé à l'origine avec IE 5 pour Mac ?

Sinon, pourquoi ne pas avoir fait l'inverse ?
    <a href="#">
        <div id="zone">
        </div>
    </a>

Après ça peut poser un problème d'accessibilité et/ou de validation du code.

Sinon, la DTD est fausse on dirait :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional ET stricte à la fois ?
Bonjour,

ce code ne pose aucun problème à IE5.x et 6.0 Windows, sous la forme où il est donné dans le premier message.

En revanche, je m'inquiète beaucoup quand je vois un lien sans intitulé, qui n'a de "surface" que via CSS. Pour l'utilisateur, notamment.
Modifié par Laurent Denis (07 Jan 2006 - 13:41)
Laurent Denis a écrit :
Bonjour,
En revanche, je m'inquiète beaucoup quand je vois un lien sans intitulé, qui n'a de "surface" que via CSS. Pour l'utilisateur, notamment.


Ça c'est sûr !
À la rigueur il y aurait peut-être moyen de faire quelque chose du genre :
<a id="lien" href="...">
    <span>Vers quoi pointe le lienx</span>
</a>

Et en CSS :
a#lien {display: block; height: ...px; width: ...px;}
a#lien span {display: none;}

Après ça dépend de l'interprétation de "display: none;" par les navigateurs texte, les lecteurs d'écran, etc.

Sinon, peut-être plus simple et plus accessible :
<a href="...">
    <img src="..." alt="Vers quoi pointe le lien" />
</a>

Ou bien un attribut alt bien renseigné ne compte pas comme "contenu" ? En rendu graphique, c'est un contenu, et en rendu texte aussi. Par contre, ça peut poser un problème pour des mal-voyants qui utilisent un navigateur normal mais avec une taille de police par défaut importante.
a écrit :
En revanche, je m'inquiète beaucoup quand je vois un lien sans intitulé, qui n'a de "surface" que via CSS. Pour l'utilisateur, notamment.

En effet Laurent Denis.
Je vais étudier tout ça pour faire au mieux Smiley smile
Je relance ce topic car j'ai avancé dans mon investigation.
Si la zone cliquable a une couleur de fond de définie, le lien sera accessible par IE
En revanche, s'il n'y a pas de couleur de fond de définie, le lien ne fonctionne pas !

Exemple : http://spheeris.free.fr/alsa/zone-cliquable.php

Une idée pour rendre la zone transparente cliquable sous IIE ?
Bonjour à tous, désolée de remettre ce sujet au goût du jour mais je rencontre également ce type de problème avec le site http://www.killtheyoung.fr Comme vous pourrez le constater par vous même, les zones cliquables de l'image de fond fonctionnent sans problème avec un navigateur de type mozilla, mais pas avec IE (et d'ailleurs j'avoue ne pas avoir été tendre avec ses utilisateurs sur ma dernière maj du site v_v)

J'ai tenté le coup du float: left mais rien n'y fait, quand j'y ai recours un seul lien (Actu) fonctionne, le texte principal se voit décalé vers le bas etc...

Voilà, je vous mets un bout de code de mon css, pour ce qui est du code html, c'est celui qui est donné par Raphaël dans le tutoriel pour la création de zone réactives en css.

Si quelqu'un a une sugestion, je suis preneuse, en tout cas merci d'avance pour votre attention.

#image {
background: url(body.jpg) left no-repeat fixed;
}
#zone1 {
position: fixed;
width : 61px;
height: 35px;
margin-left: 667px;
margin-top: 23px;
border: none;
}
#zone2 {
position: fixed;
width : 110px;
height: 30px;
margin-left: 657px;
margin-top: 182px;
border: none;
}
Sujet clos
Aller à