Cannot interact with checkbox in FireFox or Chrome. Works in IE

Here's the code:

<div id="regpage">
     <form action="" method="post">
      <fieldset style="border:none;">
      <div class="label">Username:</div> <input type="text" name="username" class="item" value="" /><br />
      <div class="caption">Must be 5-15 characters</div><br />
      <div style="clear:both;"></div>
      <div class="label">Password:</div> <input type="password" name="password" class="item" value="" /><br />
      <div class="caption">Must be 6-20 characters</div><br />
      <div style="clear:both;"></div>
      <div class="label">Email:</div> <input type="text" name="email" class="item" value="" /><br />
      <div class="caption">Valid email address is required</div><br />
      <div style="clear:both;"></div>
      <input name="terms" type="checkbox" id="terms" value="agree" /><div class="caption2"><label for="terms">I agree to the terms and conditions</label></div>
      <p><input typ开发者_JAVA百科e="submit" name="register" value="Register" id="register" style="float:left;border:1px solid #999;background:#E4E4E4;margin-top:5px;" /></p><br />
     </fieldset>
     </form>
</div>

And the id "regpage" is definded in the style.css as:

#regpage {

  width: 356px;

  height: 150px;

  color: #000000;

  font-family: "Tahoma", Arial, Helvetica, sans-serif;

  font-size: 13px;

}

If I move the checkbox OUT of <div id="regpage"> it works just fine. But inside it will not interact in Mozilla. I've even tried adding onclick='this.checked="checked"' and it still does not interact. You can click until your blue in the face and nothing will happen.

What's the deal! This is REALLY driving me batty.

---

I don't see any problem: http://jsfiddle.net/cXRPd/ (Firefox 3.0.19)

---

Found it myself: My div's height wasn't set high enough. It didn't expand enough to cover the checkbox.

Setting the height to 250 fixed the problem.

My overflow is set to hidden, but apparently it still blocked the ability to interact with the box.