Legend + checkbox class spacing issues in Fx, Cr and Sf #9187

evaneykelen opened this Issue Aug 7, 2013 · 5 comments


None yet
4 participants

See https://dl.dropboxusercontent.com/s/kgecu18dqphq703/2013-08-07%20at%2010.02.png for a quick overview showing 3 (related) issues.

Issue 1: too much spacing between legend and checkbox class in Firefox 23 (OSX). This is caused by the checkbox class, because the issue does not happen when using e.g. text fields.

Issue 2: spurious extra 10 pixels above legend when checkbox is placed underneath legend in Chrome 28 (OSX). Also caused by checkbox class.

Issue 3: too little spacing between legend and checkbox class in Safari 6.0.5 (OSX). This seems a general legend issue with Safari, not related to using checkbox class.

JSFiddle test code: http://jsfiddle.net/xvmEx/


cvrebert commented Aug 7, 2013

Related: #8688


mdo commented Aug 7, 2013

Yup, the legend sucks and there's no good way to solve it. Use an h* element instead.

mdo closed this Aug 7, 2013


mdo commented Aug 7, 2013

To clarify, the legend element is super finicky with regards to styling, so it's difficult to get anything consistent across all the browsers.

Yeah, I figured that much because I put some serious effort into fixing this by monkey patching styles but fixing it for one browser broke stuff in other browsers. If you have given up on then I'm more than happy to put it to rest :-)

eeng commented Aug 23, 2013

This works for me. Tested on Chrome, Safari and Firefox.

legend { margin-bottom: 0 }
legend + *:before { content: "."; display: block; height: 0; visibility: hidden; margin-bottom: $baseLineHeight }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment