Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Footer shows above header #10

Open
ghost opened this issue Jun 5, 2015 · 9 comments
Open

Footer shows above header #10

ghost opened this issue Jun 5, 2015 · 9 comments

Comments

@ghost
Copy link

ghost commented Jun 5, 2015

The Footer shows up above the Header. The buttons are very tiny. This occurs when forked and run "as-is" on MacOSX w/ Safari and Firefox and when forked and run "as-is" from Ubuntu w/ Firefox.
twitterus-footer-above-header

@michaelobriena
Copy link
Member

@tim93422 thanks for the report. What step of the lesson is this on?

@ghost
Copy link
Author

ghost commented Jun 5, 2015

Steps:

famous fork twitterus-tutorial
cd lesson-twitterus-starter-kit/
famous dev

I also followed the tutorial up to the point where you add the Footer and NavButtons and got the same result. It appeared that the setAlign(0,1) wasn't having the desired result, but I don't understand how it all works so you are probably best just checking it out on your own.

@michaelobriena
Copy link
Member

Thanks for the heads up, I will take a look at it.

@DnMllr
Copy link
Collaborator

DnMllr commented Jun 5, 2015

@tim93422 Can you look at the styles and confirm that the html and body elements have height of 100%?

@ghost
Copy link
Author

ghost commented Jun 5, 2015

FWIW, I used the index.html as provided by "famous fork twitterus-tutorial". It does not have height:100% for html or body. Adding this to the css fixed the issue. (The footer shows up in the correct place) Digging into it on github, I see morgantheplant submitted the following change 4 days ago:

  • html, body {
  • width: 100%;
  • height: 100%;
  • margin: 0px;
  • padding: 0px;
  • }
  • body {
  • position: absolute;
  • -webkit-transform-style: preserve-3d;
  • transform-style: preserve-3d;
  • -webkit-font-smoothing: antialiased;
  • -webkit-tap-highlight-color: transparent;
  • -webkit-perspective: 0;
  • perspective: none;
  • overflow: hidden;
  • }

The example still looks slightly funny in my browser because you can see the next to the right, but the Footer positioning is working correctly.
twitterus-footer-fixed

It looks like the actual issue is that famous fork twitterus-tutorial" is not picking up the latest submissions to github.

@DnMllr
Copy link
Collaborator

DnMllr commented Jun 5, 2015

@tim93422 Thank you very much for looking into this.

@ghost
Copy link
Author

ghost commented Jun 5, 2015

Thank you and Michael for looking into it. I never would have figured it
out on my own.

@taylorpoe
Copy link

Hmm... 14 days later there's still some sort of issue going on. Took me a long time looking through the tutorial before finally checking over here on Github and finding this issue. Adding the CSS mentioned above fixed it, but just fyi this is still broken when a user initially pulls the tutorial down from the CLI.

@MylesBorins
Copy link

@Morgantheplant @wgester can you work on getting this fixed in production please

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants