Question

I have recently started using bootstrap to create a front end to a website. I was using chrome to develop it originally. I recently started testing on firefox and I ran into a problem. I have a few radio buttons on the front page. When I click on the one I want it looks as if it is only selecting the first one and not the one I am clicking on. If I click quickly a few times it makes the selection properly. Any ideas why this is happening? The code is here :

<form action="redirector.php" action="get">
            <fieldset>
            <table border="1">
                <tr>
                    <td valign="top"><b>Please select a genome:</b><br>
                    <label class="radio">
                <input type="radio" name ="genome" value="Acral2">Acremonium Alcalophilum<br><input type="radio" name ="genome" value="Aspni3">Aspergillus niger<br><input type="radio" name ="genome" value="Glotr1_1">Gloeophyllum trabeum<br><input type="radio" name ="genome" value="Phchr1">Phanerochaete chrysosporium<br><input type="radio" name ="genome" value="PleosPC15_2">Pleurotus ostreatus<br><input type="radio" name ="genome" value="Spoth2">Sporotrichum Thermophile<br><input type="radio" name ="genome" value="Thite2">Thielavia terrestris<br>                     </label>
                    </td>
                    <td valign="top">
                        <b>View proteins with JGI annotation of type:</b><br>
                        <label class="radio">
                            <input type="radio" name ="jgiAnnotation" value=sigPInformationView>SignalP Information<br>
                            <input type="radio" name ="jgiAnnotation" value=ecInformationView>EC and Pathway Information<br>
                            <input type="radio" name ="jgiAnnotation" value=domainInformationView>Domain Information<br>
                            <input type="radio" name ="jgiAnnotation" value=goInformationView>Go Information<br>
                        </label>
                        <button type="submit" class="btn">Submit</button>
                        </fieldset>
                        </form>
                    </td>
                    <td valign="top">
                    <form action="annotationInfoView.php" action="get">
                        <fieldset>
                        <b>View single protein:</b><br>
                        Enter our ID number:<input type="text" name ="ourId"><br>
                        (i.e. jgi_Spoth2_2293939)<br>
                        <button type="submit" class="btn">Submit</button>
                        </fieldset>
                    </form>
                    </td>
                </tr>
            </table>

http://jsfiddle.net/CTF2s/

Answer 1

The problem is you have multiple radio buttons inside of a single label.

If I click quickly a few times it makes the selection properly.

This is probably because you’re clicking directly on the radio button and not the text next to the radio button. This is how all browsers will behave, including Chrome.

Check out the “Checkboxes and radios” section of Twitter Bootstrap’s “Forms” documentation for a working example.