Ruby Building Web Apps with Sinatra Finishing Touches Serving a Static CSS File

Megan Weber
Megan Weber
25,295 Points

Why am I having a FOUC? The link tag's in the head tag. How can I fix it?

^

Jay McGavren
Jay McGavren
Treehouse Teacher

I'm afraid we can't really diagnose the problem based on what you've posted here. Can you post your code?

I just set up a workspace with the code from the video, and I'm not seeing any flashes of unstyled content. Here's a snapshot of my workspace. But then, the page loads near-instantaneously for me, so maybe I'm missing it.

It might also help if we knew what browser and OS you're using, or whether you're running this on your local computer or in Workspaces.

Megan Weber
Megan Weber
25,295 Points

I'm using Workspaces in Firefox on Windows 10. Here's my workspace: https://www.dropbox.com/s/43kfmzxb1meysh0/sinatra_web_app.zip?dl=0

4 Answers

Jay McGavren
STAFF
Jay McGavren
Treehouse Teacher

Sorry, but I can't replicate using either Chrome or Firefox on my Mac. I even set it up locally and served the .css file from a separate webserver with a 3-second delay: the page displays no content at all until the .css resource finishes loading, i.e. it waits 3 seconds for the CSS to load, then displays the content, already styled.

Jay McGavren
Jay McGavren
Treehouse Teacher

I also set up your code in a Workspace, by the way. A snapshot is here: http://w.trhou.se/xty6po5bxs

Megan Weber
Megan Weber
25,295 Points

Huh. This time it worked fine for me, with no FOUC.

I noticed there was a minor typo that resulted in no styles showing but I'm not sure if this is related to your issue. The file that was automatically loaded into the workspace was named style.css and the file on the video was named styles.css. Have you tried editing your code so that the href="/style.css" rather than href="styles.css"?

Christopher Phillips
Christopher Phillips
10,049 Points

I don't know if this will solve your problem but in the workspace example, the file for the css is called "styles.css" but when you download it to work on your own system, it is singular: "style.css"

edit: Alan's response wasn't showing when I typed my answer. ..strange.