CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxtwitter-bootstrap
Randomblue
Randomblue

Reputation: 116283

Bootstrap rendering inconsistency

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?

Upvotes: 1

Views: 896

Answers (2)

MikeZ
MikeZ

Reputation: 866

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; }

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

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>

Upvotes: 0

Related Questions