1

I am trying to build my site but i face this problem and for two days i tried to solve it but i failed . the browser refuse to apply css page only for this page while another pages in my site work fine with css this is my code for problem page

<!DOCTYPE html>
<html lang="en">
 <head>
<%include partails/head %>

<link rel="stylesheet"  href="../stylesheets/resultPage.css"/>
</head>
<body>
<% include partails/header %>
<h3 class="h3 mb-3 font-weight-normal text-center" id="title">نتيجة 
الأختبار</h3>
<div class="container">
<div class="row">
<div class="col-md-10">

and this is my app.js code to upload css file 

app.use(express.static("public"));
app.set("view engine" , "ejs");
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json())
app.use(methodOverride("_method"));

and this is my file path

  • Samples10
    • public
      • stylesheets
        • resultPage.css
    • View
      • resultPage.ejs

and last thing this is the text error i got from browser

Refused to apply style from 'http://localhost:3000/result/5b31bbcacc2864263d40d240/stylesheets/resultPage.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

please can anyone help ? Thank you

Mohammed Alotaibi
  • 33
  • 1
  • 1
  • 3
  • 2
    Possible duplicate of [Stylesheet not loaded because of MIME-type](https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type) – Obsidian Age Jul 09 '18 at 02:06
  • Some things worth that could be worth checking: are the pages that are working in the same directory as the page that fails? Is the relative path `../stylesheets/resultPage.css` correct for all of them? Is the failing page being sent an html page to report a 404 error? – traktor Jul 09 '18 at 03:15
  • yes they are in same directory . no each page has own stylesheet ,but header and footer all the pages share style of header and footer and it works except this page. yes the page loaded html but without css style – Mohammed Alotaibi Jul 09 '18 at 06:32

2 Answers2

4

Refused to apply style from 'http://localhost:3000/result/5b31bbcacc2864263d40d240/stylesheets/resultPage.css'

Look at that URL.

Now look at where your static files are (in the public directory):

app.use(express.static("public"));

Now look at where the CSS is inside the public directory:

public/stylesheets/resultPage.css

So the URL to the stylesheet will be:

http://localhost:3000/stylesheets/resultPage.css

The HTML document is presumably at:

http://localhost:3000/result/5b31bbcacc2864263d40d240/something/

… so your relative URL:

href="../stylesheets/resultPage.css"

… which only goes up one level resolves to the wrong place!

Use an absolute path to start at the root of the site:

href="/stylesheets/resultPage.css"
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
-2

another wrong is miss write <% include ../partials/head %>

sumaiahSaleh
  • 1
  • 1