Footer shows above header

[tim93422]

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.

[michaelobriena]

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

[tim93422]

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]

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

[DnMllr]

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

[tim93422]

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.

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

[DnMllr]

@tim93422 Thank you very much for looking into this.

[tim93422]

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

[taylorpoe]

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]

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