At some screen widths, some of the buttons will be further apart than others in Firefox.
With CSS fix: http://jsbin.com/omacox/62
The fix above was created while consulting jquery.mobile.controlgroup.css in the master branch.
We just landed a handful of tweaks to buttons’ padding, and we’re looking fairly consistent now. Could you review and make sure everything looks good on your side?
Should the changes be showing up in the "Latest" build that's used by the JSbin template? If so, I'm still seeing the spacing problem.
Here's a screen shot of what I'm seeing in my test case on FF 11 for Windows: http://j.mp/HBnaX0
It's not always on the last button in the group, either. Centering the buttons in the header/footer bar causes the weird spacing to appear elsewhere and to become dependent on window size: http://jsbin.com/omacox/63
Screenshot of centered in FF 11/Win: http://j.mp/HOR1IN
This is caused by white space between display: inline-block elements. The current button group CSS uses a -5px right margin on all but the last control in the group to try and overcome this, but it doesn't seem to work in FF.
My above-linked fix instead sets the font size of the control group to 0 and then resets it for the buttons within the group. It also switches to pixels for the bottom margin of the control group, since 0.5em at a font-size of 0 = no margin. The -5px right margin on buttons is still necessary to maintain the tight spacing.
It's kind of an ugly work-around, but it does resolve the spacing issue. I'd just get rid of the white space between the links in the HTML and be done with it, but that would make them all blur together into one word on non-jQM supporting browsers.
@wilto - this seems to still be a problem, even on other platforms. Seems like the line is doubled up in a lot of horizontal situations.
Fixes #3948 – Slightly increased negative margin on buttons in horizo…