Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS not loading when url contains a trailing slash

I have a j2ee application I'm building and deploying to gae, and for some reason, when there is a trailing slash at the end of my url, the CSS does not load.

For example:

mysite.com/account works perfectly

but

mysite.com/account/ loads the page without the CSS

Any idea what I can do to fix this?

CSS Stylesheets:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link href="/css/rrstyles.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/grayscale.css" rel="stylesheet">
    <link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>My app</title>
</head>

I am including this header as a separate jsp, but it works when I go to /account but not /account/ for some reason. I don't understand how that could be.

like image 380
user1154644 Avatar asked Dec 15 '14 05:12

user1154644


Video Answer


1 Answers

Most of your CSS links have relative URLs. This means they will be interpreted relative to the directory of the URL of the calling page. When the caller URL is mysite.com/account, the URL css/grayscale.css is interpreted as mysite.com/css/grayscale.css. But when the caller URL is mysite.com/account/, the CSS URL is treated as mysite.com/account/css/grayscale.css.

The simplest solution is to use absolute paths in your URLs:

<link href="/css/grayscale.css" rel="stylesheet">
like image 195
Barmar Avatar answered Sep 23 '22 16:09

Barmar