ui-bar-x borders causing vertical scrollbars on Android

[frequent]

After switching to Themeroller CSS on my Android HTC, I noticed horizontal scrollbars also appearing on vertical scroll although my page should be exactly screen-width wide.

Please check the JQM docs - http://jquerymobile.com/test/docs/pages/ Firebug the header and you will see the header (ui-bar-f) only having top and bottom borders.

JQM-docs.css has .ui-bar-f like so:

.ui-bar-f {
    border-top: 1px solid   #56A00E;
    border-bottom: 1px solid #56A00E;
    ...

whereas my themeroller themes (but also in the JQM docs) go like this:

.ui-bar-a {
    border: 1px solid       #2A2A2A /*{a-bar-border}*/;
    ...

This gives headers and footers an additional 1px on the left and right, causing horizontal scrollbars to appear on every vertical scroll. If I comment out this line everything is fine.

Not sure what places this class is also used - but if the JQM docs only need top and bottom border it should be ok to switch to this, shouldn't it?

[frequent]

just saw. I posted this as an issue before :-)

If you want I can send you a screenshot from my Android. Not sure this is helpful though...

[tybenz]

This issue has finally been fixed. My apologies. The problem was that the custom styles defined by the user in ThemeRoller had to overwrite some of the jQuery Mobile structural styles.

To clarify, however, a single border rule is used in the stylesheet because jQuery Mobile 1.0.1 does it this way. ui-bar-x gets only one border rule (e.g. border: 1px solid #000) and ui-header has a border-right-width: 0 and border-left-width: 0.

[frequent]

Yes, you are right. I noticed all my bars missing left and right borders. Thx for the update