1.0.1 RC1 footer does not use the full width #3891

Closed
mrextreme opened this Issue Mar 23, 2012 · 9 comments

Comments

Projects
None yet
3 participants

1.0.1 RC1 footer does not use the full width, so unwanted lines are visible on left and right. Tested on Android 2.2 and 2.3.

This CSS improves a bit, but does not fix the problem.

.ui-bar-c
{
    border: none;
}

a#btn-about
{
    border-left: none;
}

.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c
{
    width: 33.334%;
}

We are using a custom theme made by Themeroller.

I forgot to mention that in this case we have 3 items in the footer. If it was 2, 4 or 5 it wouldn't be a problem. But even with 33.333% width, for some reason there are unused columns on the rigth side - if I remember correctly 2 or 3 pixels width with on a 480px wide screen.

Contributor

toddparker commented May 24, 2012

Do you have a test page where we can see the issue?

Unforutnately no, but I may be able to take some screenshots on a real phone, with turned-off "fixes" of mine, and add some HTML and CSS here. ( It is so lame I cannot attach images here... )

Ok, after creating a stripped-down version of our mobile app, as far as I can see the problem is with our CSS. Originally it was created with ThemeRoller for 1.0, then got converted by ThemeRoller to be 1.1 compatible. Without that CSS the footer looks perfect. So I suppose something went wrong during conversion.

Member

jaspermdegroot commented May 24, 2012

This is a general issue with using percentage width: the sub-pixel problem.
See also #2270 (comment) and this blog post from John Resig http://ejohn.org/blog/sub-pixel-problems-in-css/

I remember a case where it made a difference using 33.333333333% instead of 33.333% so we could give that a look.

CSS calc() would probably solve it but that is still experimental.

Member

jaspermdegroot commented May 24, 2012

Just for reference: #2270

My fix was as follows.

.ui-bar-c
{
    border: none;
}

/* leftmost item in footer */
a#btn-about
{
    border-left: none;
}

.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c
{
    width: 33.334%;
}
Member

jaspermdegroot commented May 24, 2012

@mrextreme - I am closing this issue because it is a duplicate of #3341 which is posted earlier.

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