Java Intro to Java Web Development with Spark Bells and Whistles Details

CSS not showing up on page

On the video "details" for some reason the CSS won't work on the new webpage. The CSS works on the previous webpages however it won't work on the new one. What could cause this?

2 Answers

Alexander Nikiforov
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Nikiforov
Java Web Development Techdegree Graduate 22,150 Points

It sound strange for me that CSS works on one page, but does not work on another...

I can tell you things that you have to check, to make CSS work, but otherwise, the only way I can help you if you share a project on a GitHub and share a link here, so that I can take a look

1. Set publicFileLocation in Main.java

public class Main {
    // code
    public static void main(String[] args) {
        // This line means whatever you put in
       //  "src/main/resource/public" will be available on the web
        staticFileLocation("/public");
       // code
   }
}

Compare your file to Craigs Main.java

2. In .hbs file where CSS broke, use {{> base.hbs}}

So for example in youridea.hbs CSS does not work.

Make sure that you have that line at the very bottom.

{{> base.hbs}}

Here is idea.hbs from Craigs repo.

The last thing to check is whether the CSS is actually included in the file.

{{#block "header"}}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{#block "title"}}Welcome to Course Ideas{{/block}}</title>
    <link rel="stylesheet" href="/css/main.css">
</head>
<!-- Other code -->

PS.

You can also compare your files and Craigs repo or to re-watch video.

But it is pretty strange that CSS does not work on one page.

The only reason that comes up, Maybe, you forgot to include {{>base.hbs}.

Otherwise, have to see the code

Thank you for your response. My problem was that I had this:
href="css/main.css">

rather than having this: href="/css/main.css">

I still don't know why this would cause the CSS to only appear on the previous pages.

Alexander Nikiforov
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Nikiforov
Java Web Development Techdegree Graduate 22,150 Points

Great!

I was able to reproduce the error!

Relative path leads to error

Indeed when you write

    <link rel="stylesheet" href="css/main.css">

Spark will find CSS for ALL following pages with ONE slash, i.e.

  • http://localhost:4567/ideas
  • http://localhost:4567/
  • http://localhost:4567/whatever

However when you go to detail page with TWO slashes:

  • http://localhost:4567/ideas/qwewqew

It will NOT work, because Spark uses relative paths, i.e. he is looking for

  • http://localhost:4567/ideas/css/main.css

Indeed if you go to Developer Tools, you can see picture like this with error

https://drive.google.com/open?id=0B-PasBhXWCeES1Rxb2N3MHM4MFE

Absolute path solves the problem

When you use

    <link rel="stylesheet" href="/css/main.css">

He is looking for http://localhost:4567/css/main.css

And that is exactly where your static files lie.

PS. Using Developer Tools

If you want to dive into Web Development, start learning to use Browser Developer Tools

Craigs has made a nice Workshop about it check it out.

Mastering this tool will help you debug Web App much faster!

Kareem Jeiroudi
Kareem Jeiroudi
14,982 Points

Had the exact same issue, was going crazy, and couldn't tell where the problem is. Thanks a lot for posting it 👍!