Bug on form (CSS and Javascript related?)

[bsewell]

Hello all,
I have an interesting bug in a calculator I have written. I've snipped the code done to something to get an idea of the calculator. So, if I clilck on Imperial, I can't seem to put input into my text boxes. However, if I press my TAB button then I can navigate through the text boxes.

I would appreciate it if someone could spot what the bug is. Everything works perfectly apart from this bug.

HTML

<form name="bmi_calculator">
  <div style="position:relative;display:inline;float:left; width:600px;">
    <div style="position:relative">    
        <div id="imperial">
          <p>Display Units in <a onClick="switchFields('metric');">Metric</a></p>
           <div style="width:280px;"><div class="bmi" style="width:100px;display:inline;float:left;">Height:</div><div class="bmi" style="width:180px;display:inline;float:left;"> <input type="text" id="m_height" name="m_height" /> m</div></div>
           <div style="width:280px;"><div class="bmi" style="width:100px;display:inline;float:left;">Weight:</div><div class="bmi" style="width:180px;display:inline;float:left;"> <input type="text" id="m_weight" name="m_weight" /> kg</div></div>
           <div style="width:280px;"><div class="bmi" style="width:100px;display:inline;float:left;">Goal Weight:</div><div class="bmi"style="width:180px;display:inline;float:left;"><input type="text"> kg</div></div>
            <div style="width:280px;"><div class="bmi" style="width:100px;display:inline;float:left;">Age:</div><div class="bmi" style="width:180px;display:inline;float:left;"><input type="text"></div></div>
            <div style="width:280px;"><div class="bmi" style="width:100px;display:inline;float:left;">Gender:</div><div class="bmi" style="width:180px;display:inline;float:left;"><input name="gender" value="male" type="radio" /> Male <input name="gender" value="female" type="radio" checked="checked" /> Female</div></div>
            <div style="position:relative;"><button id="bmiButton" style="background:url(bmi_results.jpg) no-repeat; width:308px;height:68px; border:0;" alt="Get Your BMI results" onClick="return false;"></button></div>
        </div>
        <div id="metric">
          <p>Display Units in <a onClick="switchFields('imperial');">Imperial</a></p>
          <div class="bmi" style="display:inline; float:left; width:100px;">Height:</div>
            <div class="bmi" style="width:260px;display:inline;float:left;"><select name="ft_height" id="ft_height" style="width:100px;"><option value="4">4</option><option value="5" selected="selected">5</option></select> in.</div><div class="clear"></div>
            <div class="bmi"style="display:inline; float:left; width:100px;">Weight:</div><div class="bmi" style="width:260px;display:inline;float:left;"><select name="st_weight" id="st_weight" style="width:100px;"><option value="7">7</option><option value="8">8</option></select> lbs.</div><div class="clear"></div>
            <div class="bmi" style="display:inline; float:left; width:100px;">Goal Weight:</div><div class="bmi" style="width:260px;display:inline;float:left;"><select name="st_gweight" style="width:100px;"><option value="7">7</option><option value="8">8</option></select> st <select name="lb_gweight" style="width:100px;"><option value="0" selected="selected">0</option><option value="1">1</option><option value="2">2</option></select>lbs.</div><div class="clear"></div>
            <div class="bmi" style="display:inline; float:left; width:100px;">Age:</div><div class="bmi" style="width:260px;display:inline;float:left;"><select name="age" style="width:100px;"><option value="18">18</option><option value="19">19</option></select></div>
            <div class="clear"></div>
            <div class="bmi" style="display:inline; float:left; width:100px;">Gender:</div><div class="bmi" style="width:260px;display:inline;float:left;"><input type="radio" name="gender" value="male" /> Male <input type="radio" name="gender" value="female" checked="checked" /> Female</div><div class="clear"></div>
            <div style="position:relative;"><button id="ibmiButton" style="background:url(bmi_results.jpg) no-repeat; width:308px;height:68px; border:0;" alt="Get Your BMI results" onClick="return false;"></button></div>
         </div>
</div>
</div>
</form>

Javascript:

            function switchFields(which) 
            {

                if (which == "metric") 
                {
                    document.getElementById("imperial").style.visibility = "hidden";
                    document.getElementById("metric").style.visibility = "visible";
                }
                else
                {
                    document.getElementById('metric').style.visibility = "hidden";
                    document.getElementById('imperial').style.visibility = "visible";
                }

                return false;

            }

CSS

#metric
{
    position:absolute;
    top:0px;
    left:0px;
    width:390px;
    height:275px;
    visibility:visible;
    background-color:#ffffff;
    padding-left:10px;
    padding-right:10px;
}

#imperial
{
    position:absolute;
    top:0px;
    left:0px;
    width:390px;
    height:275px;
    visibility:hidden;
    background-color:#ffffff;
    padding-left:10px;
    padding-right:10px;
}

Cheers,