Problème de label avec Internet Explorer (6, 7 et 8)

**camcam8782** · 30/07/2009, 11h30

Bonjour,

J'ai un probleme étrange pour lié mes les label du code ci dessous avec les input radio correspondants sous Internet Explorer (cela marche très bien sur tous les autres navigateurs). En effet, rien ne se passe lorsque je click sur l'une des images contenus dans chaque label alors que cela devrait 'activer' le radio correspondant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<span id="sex_femme">
	<label for="sexF"><img src="./img/index/filtre/femme.jpg" alt="une femme" title="une femme"></label>
</span>
<span id="sex_homme">
	<label for="sexH"><img src="./img/index/filtre/homme.jpg" alt="une femme" title="un homme"></label>
</span>

Merci d'avance pour votre aide,

cam

**franculo_caoulene** · 30/07/2009, 11h53

Salut,

En effet, c'est la façon d'interpréter d'IE. En soit, il n'y a rien à faire. On peut passer par du CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>rendre un label contenant une image cliquable sous IE</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;}
  body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
  p {margin:5px 0;padding:5px;background:#333;}
  label {margin:0 2em 0 0;width:5em;display:block;float:left;text-indent:-5000em;}
  #l1 {background:#666 no-repeat url("img/1.png") ;}
  #l2 {background:#666 no-repeat url("img/2.png");}
  </style>
</head>
<body>
  <form id="f" method="post">
  <p><label id="l1" for="r1">homme</label><input id="r1" name="r" type="radio" value="homme" /></p>
  <p><label id="l2" for="r2">femme</label><input id="r2" name="r" type="radio" value="femme" /></p>
  </form>
  <p>Attention : si les images sont désactivées , mais pas le CSS, il n'y aura plus aucune instruction visible concernant ces boutons</p>
</body>
</html>

mais il faut savoir que si les images sont désactivées , mais pas le CSS, il n'y aura plus aucune instruction visible concernant ces boutons

Problème de label avec Internet Explorer (6, 7 et 8)

HTML

Vue hybride

Discussions similaires

Partager

Partager