HTML fieldsets/div borders in Internet Explorer

Question

I'm making an options menu, and I'd like to be able to enable/disable part of the menu with a checkbox. So I've tried 3 things here which work fine and look alright in Chrome/Firefox but I can't figure out how to get it to look alright in IE too.

1. I tried first using the fieldset and offsetting a legend and checkbox which were inside it, see here: fieldset
2. Then I tried using a div and label doing a similar approach, see here: div/label
3. Finally I tried moving the label/checkbox outside of the div but again it looks bad in IE, see here: div/label outside div

I'm not very good at CSS for different browsers so I'm sorry if this is a really simple common thing, but I couldn't find anything about it from what I could think to Google.

I have all the logic working fine and I'm only trying to display the html/css correctly here so no need to post answers with javascript enabling/disabling stuff.

This is the HTML for attempt 1:

<fieldset class="groupBox">
<legend>Load template automatically</legend>
<input id="LoadTemplateCheckBox" type="checkbox" class="fieldsetCheckbox" />
<div id="templateDiv">
    <label>Root Path:</label>
    <input type="text" id="templateLocation" readonly="true"/>
    <button type="button">...</button>
</div>
</fieldset>

and the relevant CSS:

.fieldsetCheckbox{
  width: 16px;
  margin-top: -31px;
  margin-left: -14px;
  float: left;
}

.groupBox{
  padding: 15px;
  border: 2px solid #ccc;
  margin: 0px 0px 5px 0px;
}

Answer 1

How about putting the input inside the legend, like this: http://jsfiddle.net/dv866/6/

<legend>
    <input id="LoadTemplateCheckBox" type="checkbox" class="fieldsetCheckbox" />
    Load template automatically
</legend>