Le bouton radio du formulaire Html ne fonctionne pas

Mon index.php contient un tas de code php et javascript, et un format html en CSS. Je ne suis pas très expérimenté avec CSS, mais je ne pense pas que cela affecterait la facilité d'utilisation de ce formulaire html. Voici le code d'index:Le bouton radio du formulaire Html ne fonctionne pas

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>Untitled</title> 
    <meta name="description" content="Choose"/> 
    <meta name="keywords" content="choose "/> 
    <link rel="shortcut icon" href="http://i/favicon.ico"> 

    <!--[if lt IE 7]> 
     <script type="text/javascript" src="FullPageBackgroundImage/js/mootools.js"></script> 
     <script type="text/javascript" src="FullPageBackgroundImage/js/core.js"></script> 
    <![endif]--> 


<link rel="stylesheet" type="text/css" href="style.css" /> 

</head> 

<body> 

<div id="content"> 
<div id="poll"> 
<form> 

<input id="ch1" type="radio" name="choice" value="0" /> 
<label for="ch1"> 
<?php echo $current['choice1']; ?> 
</label> 
<br /> 
<input id="ch2" type="radio" name="choice" value="1" /> 
<label for="ch2"> 
<?php echo $current['choice2']; ?> 
</label> 
</form> 
</div> 
hello 

</div> 

</body> 
</html>

Et voici le CSS:

body { 
    background-color:#000; 
    background:#fff; 
    background-repeat: repeat-x; 
    background-attachment:fixed; 
} 

#top_header{ 
    width:100%; 
    height:52px; 
    background:#FFF; 
    position:fixed; 
    left:0px; 
    top:0px; 
    z-index:-1; 

} 

#logo{ 
    background-image:url('Images/web_buttons.jpg'); 
    position:fixed; 
    top:3px; 
    left:0px; 
    width:366px; 
    height:45px; 

} 

#display{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -40px; 
    position:fixed; 
    top:0px; 
    left:420px; 
    width:57px; 
    height:19px; 

} 

#display_divider{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: -100px -45px; 
    position:fixed; 
    top:0px; 
    left:477px; 
    width:8px; 
    height:50px;  
} 

a.display_single{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -80px; 
    position:fixed; 
    top:0px; 
    left:485px; 
    width:67px; 
    height:26px; 
} 

a:hover.display_single{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -104px; 
    position:fixed; 
    top:0px; 
    left:485px; 
    width:67px; 
    height:26px; 
} 

a.display_multiple{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -128px; 
    position:fixed; 
    top:26px; 
    left:485px; 
    width:86px; 
    height:26px; 
} 
a:hover.display_multiple{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -152px; 
    position:fixed; 
    top:26px; 
    left:485px; 
    width:86px; 
    height:26px; 
} 

#view{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -58px; 
    position:fixed; 
    top:0px; 
    left:620px; 
    width:37px; 
    height:19px;  
} 

#view_divider{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: -100px -45px; 
    position:fixed; 
    top:0px; 
    left:657px; 
    width:8px; 
    height:50px;  
} 

a.view_WTFest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -178px; 
    position:fixed; 
    top:0px; 
    left:665px; 
    width:69px; 
    height:26px; 
} 

a:hover.view_WTFest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -204px; 
    position:fixed; 
    top:0px; 
    left:665px; 
    width:69px; 
    height:26px; 
} 

a.view_lamest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -228px; 
    position:fixed; 
    top:26px; 
    left:665px; 
    width:69px; 
    height:25px; 
} 

a:hover.view_lamest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -253px; 
    position:fixed; 
    top:26px; 
    left:665px; 
    width:69px; 
    height:25px; 
} 

a.view_latest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -275px; 
    position:fixed; 
    top:0px; 
    left:734px; 
    width:69px; 
    height:25px; 
} 

a:hover.view_latest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -300px; 
    position:fixed; 
    top:0px; 
    left:734px; 
    width:69px; 
    height:25px; 

} 

a.view_oldest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -323px; 
    position:fixed; 
    top:26px; 
    left:734px; 
    width:69px; 
    height:26px; 
} 

a:hover.view_oldest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -348px; 
    position:fixed; 
    top:26px; 
    left:734px; 
    width:69px; 
    height:25px; 

} 

a.submit_choices{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -373px; 
    position:fixed; 
    top:3px; 
    right:3px; 
    width:164px; 
    height:41px; 
} 

a:hover.submit_choices{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: -162px -373px; 
    position:fixed; 
    top:3px; 
    right:3px; 
    width:164px; 
    height:41px; 

} 

a.navigation_left{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -413px; 
    position:fixed; 
    bottom:6px; 
    left:3px; 
    width:134px; 
    height:19px; 
} 

a:hover.navigation_left{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: -134px -413px; 
    position:fixed; 
    bottom:6px; 
    left:3px; 
    width:134px; 
    height:19px; 
} 

a.navigation_right{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -435px; 
    position:fixed; 
    bottom:6px; 
    right:3px; 
    width:104px; 
    height:19px; 
} 

a:hover.navigation_right{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: -134px -435px; 
    position:fixed; 
    bottom:6px; 
    right:3px; 
    width:104px; 
    height:19px; 
} 

/*conten*/ 
#content{ 
    position:relative; 
    top:55px; 
    z-index:-3; 
}

Avec cela, je ne peux sélectionner le deuxième bouton radio, le premier ne peut pas être sélectionné. La chose étrange est, si je supprime la rupture entre les entrées, cela fonctionne parfaitement. Ou je peux laisser la pause là-bas, et enlever le 'helloworld' après le formulaire, et ça marche aussi.

Quelqu'un a des idées ou voit-il quelque chose de mal? Je veux avoir les boutons sur le dessus de l'autre et je dois avoir un autre texte sous ..

Le code CSS est ici

Source

2010-11-02 Cody

Copiez-collez votre code de la question dans le fichier html vide et voyez-vous que cela fonctionne. – zerkms

collez dans votre CSS s'il vous plaît –

Avec quels navigateurs est-ce que cela se passe? – Ben

Pourquoi avez-vous z-index:-3? Vous demandez au navigateur de placer le contenu derrière les autres couches ...

Source

2010-11-02 06:11:59

J'ai fait une page avec son code ci-dessus et fait quelques tests, et cette ligne est ce qui cause le problème, à coup sûr. – patmortech

OUI, j'aurais dû m'en séparer ... merci beaucoup! – Cody

Le CSS est presque certainement en faute. On dirait qu'il y a un noeud enfant qui est sélectionné (<br />) quand vous ne le voulez pas. Pourrait également se produire à partir de Javascript.

Source

2010-11-02 06:04:04 Ben

Le bouton radio du formulaire Html ne fonctionne pas

Répondre

Questions connexes