Horizontal control groups in headers/footers have poor button spacing in FF #3948

Closed
adammessinger opened this Issue Apr 1, 2012 · 3 comments

3 participants

@adammessinger

At some screen widths, some of the buttons will be further apart than others in Firefox.

Example: http://jsbin.com/omacox/59
With CSS fix: http://jsbin.com/omacox/62

The fix above was created while consulting jquery.mobile.controlgroup.css in the master branch.

@Wilto Wilto was assigned Apr 1, 2012
@Wilto

Hey @adammessinger!

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?

@adammessinger

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.

@toddparker

@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.

@Wilto Wilto added a commit that closed this issue Apr 5, 2012
@Wilto Wilto Fixes #3948 – Slightly increased negative margin on buttons in horizo…
…ntal controlgroups.
6389294
@Wilto Wilto closed this in 6389294 Apr 5, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment