.btn on input vs button vs href elements result in different heights in FF #2985

Closed
thezoggy opened this Issue Apr 8, 2012 · 6 comments

Projects

None yet

5 participants

@thezoggy
thezoggy commented Apr 8, 2012

http://twitter.github.com/bootstrap/base-css.html#buttons

the 'One class, multiple tags' section.

ff 3.6x, the href version ends up being 18px instead of 16px like the rest.
ff 11, the href and button are 18px while the inputs are 16px.
ie9 & chrome 18 & safari 5.1 - they appear to all be the same height

in 2.0.3-wip ive noticed that the line height problem still exists for input vs button.

@mdo
Member
mdo commented Apr 8, 2012

There's currently no way around this if memory serves. Firefox forces an !important on the line-height of one of those elements (forgot if it's input or button) and it cannot be overridden. If you have any ideas on how to get around that, do let me know :).

(There was also a previous issue open for this problem that we closed for the same reason.)

@mdo mdo closed this Apr 8, 2012
@thezoggy
thezoggy commented Apr 8, 2012

couldnt find the previous issue, but here is a link about this problem in case anyone else comes across this ticket:
http://www.cssnewbie.com/input-button-line-height-bug/
mozilla bug entry @ https://bugzilla.mozilla.org/show_bug.cgi?id=349259

@guillerodriguez

Not perfect but setting the height of the button works around this in Firefox (lets you have the same height for input / button / href elements with .btn applied).

@KevinMartin

Update?

@KevinMartin

In the meantime, I changed the following in buttons.less

// FROM

.btn {
  display: inline-block;
  .ie7-inline-block();
  padding: 4px 12px;
  margin-bottom: 0; // For input.btn
  font-size: @baseFontSize;
  line-height: @baseLineHeight;

// TO

@btnPaddingLarge: ((17.5px - @fontSizeLarge) / 2 + 11px) 19px; // 44px
@btnPaddingNormal: ((14px - @baseFontSize) / 2 + 6px) 12px; // 30px
@btnPaddingSmall: ((11.9px - @fontSizeSmall) / 2 + 5px) 10px; // 26px
@btnPaddingMini: ((10.5px - @fontSizeMini) / 2 + 4.75px) 6px; // 24px

.btn {
  display: inline-block;
  .ie7-inline-block();
  padding: @btnPaddingNormal;
  margin-bottom: 0; // For input.btn
  font-size: @baseFontSize;
  line-height: normal !important;

// FROM

.btn-large {
  padding: @paddingLarge;
...

.btn-small {
  padding: @paddingSmall;
...

.btn-mini {
  padding: @paddingMini;

// TO

.btn-large {
  padding: @btnPaddingLarge;
...

.btn-small {
  padding: @btnPaddingSmall;
...

.btn-mini {
  padding: @btnPaddingMini;

This works well. I've tested it with @baseFontSize at 14px and 12px. The above provides a pretty consistent way to adjust the height across browsers. Tested in Chrome 18, Firefox 16, Safari 6 (All on Mac)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment