legend not centering correctly with margins in firefox

Question

I'm hoping someone can spot the issue here, as unfortunately I can't easily reproduce it in a jsfiddle (Edit: turns out I can, see the jsfiddle linked below), so something else must be at play.

See the attached screenshots, the unexpected result in Firefox, and the expected result in Chrome respectively:

The relevant CSS (well, Stylus):

legend
      center()
      width 750px
      font-size 28px
      margin-top 80px
      margin-bottom 20px
      color color-text

All containers (fieldset, form) have a width of 100%.

(The center() is from jeet.gs - seems to just add a float: none, display: block and margin: 0 auto - but you can see the outcome in the screenshots.)

Here's a jsfiddle that seems to work just fine: https://jsfiddle.net/nfLudt59/1/ - which tells me that it's not an issue inherent in the legend element. EDIT: I hadn't wrapped the legend in a fieldset, when this is done, the problem IS reproduced.

Am I missing something blindingly obvious?

I'm pretty sure a legend in a fieldset behaves different from one outside it, so is the problem reproducible a fiddle when you put the fieldset in? — Mr Lister, Dec 04 '15 at 11:39

score 0 · Accepted Answer · answered Dec 04 '15 at 12:03

So this is clearly a discrepency between Chrome and Firefox, combining an answer found elsewhere with some MAcGyver'ing the solution seems to be:

Use align="center" on the legend (inline)
Apply text-align: left to the legend via CSS

Updated jsfiddle: https://jsfiddle.net/nfLudt59/3/

HTML

<fieldset>
  <legend align="center">
    Hello
  </legend>
</fieldset>

CSS

fieldset{
  width: 100%;
}
legend{
  text-align: left;
  display: block;
  width: 200px;
  margin: 0 auto;
}

legend not centering correctly with margins in firefox

1 Answers1