Bootstrap rendering inconsistency - html

Question

I have a rendering inconsistency between Chrome (correct) and Firefox (incorrect) when using Bootstrap. This is my code (fiddle here):
<div class='container'>
<form class='form-horizontal well span6 offset3'>
<label class='control-label'>Testy</label>
<div class='controls'>
<select></select>
</div>
</form>
<legend>Hello!</legend>
</div>
What is the cause of the inconsistency? How can I fix the Firefox rendering so that it matches Chrome's?

Answer 1

It appears to be the way that Firefox and Chrome render the fieldset tag, at least with the non-responsive version of Bootstrap you're referencing. In an effort to eliminate variables, I removed the reference to Bootstrap and linked to bootstrapcdn.com's version, which seemes to fix the problem.
If nothing else, you could always add a bit of CSS to the fieldset tag to ensure it renders the same across all modern browsers.
fieldset { clear: both; }
Update: Looks like I was not paying attention, I've updated this answer to reflect CSS on the legend tag, rather than fieldset. JSFiddle Here.
legend { clear: both; }

Answer 2

The legend tag should be placed within the form tag and it should also have a fieldset tag placed around it.
See this example from Bootstrap:
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
And for your code it would be:
<div class='container'>
<form class='form-horizontal well span6 offset3'>
<fieldset>
<label class='control-label'>Testy</label>
<div class='controls'>
<select></select>
</div>
<legend>Hello!</legend>
</fieldset>
</form>
</div>