Position of labels and checkboxes/radios bad in Firefox on KDE GNU/Linux

[wolftune]

From right on the Bootstrap website itself. Looks ok in Chromium but lousy in Firefox:

That's just a screen-shot from http://getbootstrap.com/css/ visited in Firefox 35.0.1 on Ubuntu. Most noticeably, the vertical-alignment is off, but it also seems to lack some space between the buttons and the labels.

[kkirsche]

I think this has more to do with the operating system then the theme. It's due to the larger size of the default buttons. Firefox 35.0.1 on Mac looks fine in that same part:

Unless they override OS button styles, I'm not sure this is worth chasing.

[wolftune]

This is not strictly an OS issue because, as stated, the same thing looks fine on Chromium on the same OS. However, it's obvious that it related to the OS.

[patrickhlauke]

It is OS-specific, as I suspect Firefox on Linux uses the OS-native form controls ([EDIT] it seems it also does this still on Windows and Mac), while Chromium does its completely custom controls.

Here's FX on Win, for comparison:

[patrickhlauke]

In principle though, I agree it would be useful to ensure that even on Linux, the control + label combo is at least vertically centered somehow...

[wolftune]

I don't know if this is helpful or what else to do, but it looks good on my system if I make the buttons position: relative instead of absolute and use vertical-align: sub. But that's a hacky solution it seems. The position changes does make Chromium slightly worse. Anyway, it needs both of those together to be effect even as a hack.

[kkirsche]

Firefox on Ubuntu 14.04 Unity

Will pull up my copy of KDE next.

[kkirsche]

Yep, I can duplicate it only with Kubuntu 14.10 Plasma 4

I personally would recommend filing the bug with KDE or Firefox as this seems more related to them than Bootstrap I feel at least.

[wolftune]

Even on that Unity screen-shot the vertical align is a little off…

[wolftune]

I found https://bugzilla.mozilla.org/show_bug.cgi?id=210212

But that's 12 years old, and I can't tell if it's really related. Maybe a new ticket makes sense, I'm unsure.

[wolftune]

Note that on a plain site with no Bootstrap at all, the look isn't super, but it's not so bad.

I used

<form method="get">
<input type="radio" value="Red" name="preferred_color"> Red<br>
<input type="radio" value="Blue" name="preferred_color"> Blue<br>
<input type="radio" value="Green" name="preferred_color"> Green<br>
<input type="submit" value="Submit">
</form>

And got

So, it's not like Firefox in KDE is just doing this stuff badly always.

[kkirsche]

Same result as you just posted @wolftune after normalize.css is applied. Just working through identifying if this is in Bootstrap itself and making sure it's not in an upstream item they are using

[K4T]

Same problem here on those browsers:
Desktop: Firefox 35, 36
Mobile: Iphone 5 newest Safari browser, native Android 4.3 browser.

Funny thing: that problem doesn`t occur on Firefox mobile.

Are you really sure that is browser bug? Any chances to get it work?

[kkirsche]

@K4T — what operating system for the Desktop browsers? Are you confirming simply for KDE based Linux systems on those versions or other operating system(s)? If other operating systems, could you please state those so they can be confirmed?

On my iPhone 5S yes it's a tiny bit higher, but not nearly like in the examples shown in my opinion. Thanks for sharing your take on it though. 😃

[K4T]

@kkirsche I tested it on Windows 8.1.

Btw: on native Android 4.3 browser it`s much more higher than on iPhone.

[patrickhlauke]

Confirming that there is a very slight vertical misalignment here in iOS/Safari and Win8.1/Firefox [edit: and IE11] - so it may indeed need a slight tweak somewhere... /cc @mdo

iOS/Safari

Win8.1/Firefox

Win8.1/IE11

[mdo]

There's no easy way to accomplish 100% cross browser consistency here. Some of the Linux browsers are bound to cause problems like this. Punting as a won't fix.

[wolftune]

We don't need 100% cross-browser consistency, we just need it not to be really off, as it is in KDE Firefox… The rest of the examples are just subtle and can be ignored, but please don't just lump everything together. There's a specific case that is really off and should be fixed…