CSS applied to all pages but one

CSS applied to all pages but one - Ruby/Sinatra

I'm creating a simple web application with Ruby using Sinatra, and when modifying the views, the CSS is applied to all .erb files except one. I'm not quite sure what the issue is. I've tried:

Clearing my browser cache

Running the application on a new browser (Chrome, Safari, Firefox, even Edge)

Running the application on a different device

Linking the stylesheet directly from the erb file

This is my layout.erb file

<br/>

<h2>Upload a Video</h2>

<br/>

<br/>

<form action="/create_video" method="POST">

  <div class="col-6">

    <label for="videoTitle">Video Title</label>

    <input type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter video title" name="title">

  </div>

  <br/>

  <div class="col-6">

    <label for="videoDescription">Video Description</label>

    <input type="text" class="form-control" placeholder="Enter video description" name="description">

  </div>

  <br/>

    <br/>

    <div class="col-6">

     <label for="videoURL">Video Link</label>

     <input type="text" class="form-control" placeholder="Enter link to video" name="l_url">

    </div>

    <br/>

    <div class="col-6">

     <label for="listingUrl">Company</label>

     <input type="text" class="form-control" placeholder="Enter company name" name="company">

    </div>

    <br/>

  &nbsp;&nbsp;<button type="submit" class="btn btn-primary">Submit</button>

</form>

<br/>

<br/>

</div>

My layout.erb file

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Roboto:300|Niramit|Nunito" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="style.css">

    <link rel="stylesheet" type="text/css" href="animate.css">

</head>

<body>



    <%= erb :navigation %>



    <main role="main">



        <%= yield %>



    </main>





    <footer class="end">

         <div class="footer-grid">

      <div class="footer-one">

        <p> logo<p>

      </div>

        <div class="footer-two">

            <p>&copy; Copyright Ignite 2018. All rights reserved.</p>

            <p>Terms of use • Press Inquiries • General Inquiries • Investors</p>

        </div>

        <div class="footer-three">

        <img src="https://image.flaticon.com/icons/svg/185/185981.svg" width=40 height=40>

        &nbsp;&nbsp;&nbsp;&nbsp;

        <img src="https://image.flaticon.com/icons/svg/185/185961.svg" width=40 height=40>

        &nbsp;&nbsp;&nbsp;&nbsp;

        <img src="https://image.flaticon.com/icons/svg/185/185985.svg" width=40 height=40>

        </div>

    </footer>





    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

Finally, this is a small snippet where the style sheet IS working:

   <br/>

   <br/>

   <h2>Videos</h2>

   <br/>

   <br/>

   <% @videos.each do |v| %>

      <img src="<%= v.logo %>" width="110" height="110">

      <h3><%= v.title %></h3>

      <p><%= v.l_url %></p>

      <p><%= v.description %> </p>

   <br/>

   <% end %>

   <br/>

   <br/>

   <br/>

   <br/>

</div>

Any idea what might be wrong? I appreciate any tips.

edited Nov 20 '18 at 23:55

asked Nov 20 '18 at 22:53

slope

1

Are there any errors in the browsers console?
– Marvin Klar
Nov 20 '18 at 23:03

What's the path (URL) to the page where the CSS isn't applied?
– timbillstrom
Nov 20 '18 at 23:44

So I just checked the browser console, and I'm getting this error: Refused to apply style from 'localhost:4567/videos/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Do you know how I can resolve this issue?
– slope
Nov 20 '18 at 23:50

@timbillstrom it works on all paths except the "localhost:4567/upload_video"
– slope
Nov 20 '18 at 23:51

@slope Could you send a example of the URL where the CSS is in fact working?
– timbillstrom
Nov 20 '18 at 23:53

|
show 5 more comments

I'm creating a simple web application with Ruby using Sinatra, and when modifying the views, the CSS is applied to all .erb files except one. I'm not quite sure what the issue is. I've tried:

Clearing my browser cache

Running the application on a new browser (Chrome, Safari, Firefox, even Edge)

Running the application on a different device

Linking the stylesheet directly from the erb file

This is my layout.erb file

<br/>

<h2>Upload a Video</h2>

<br/>

<br/>

<form action="/create_video" method="POST">

  <div class="col-6">

    <label for="videoTitle">Video Title</label>

    <input type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter video title" name="title">

  </div>

  <br/>

  <div class="col-6">

    <label for="videoDescription">Video Description</label>

    <input type="text" class="form-control" placeholder="Enter video description" name="description">

  </div>

  <br/>

    <br/>

    <div class="col-6">

     <label for="videoURL">Video Link</label>

     <input type="text" class="form-control" placeholder="Enter link to video" name="l_url">

    </div>

    <br/>

    <div class="col-6">

     <label for="listingUrl">Company</label>

     <input type="text" class="form-control" placeholder="Enter company name" name="company">

    </div>

    <br/>

  &nbsp;&nbsp;<button type="submit" class="btn btn-primary">Submit</button>

</form>

<br/>

<br/>

</div>

My layout.erb file

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Roboto:300|Niramit|Nunito" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="style.css">

    <link rel="stylesheet" type="text/css" href="animate.css">

</head>

<body>



    <%= erb :navigation %>



    <main role="main">



        <%= yield %>



    </main>





    <footer class="end">

         <div class="footer-grid">

      <div class="footer-one">

        <p> logo<p>

      </div>

        <div class="footer-two">

            <p>&copy; Copyright Ignite 2018. All rights reserved.</p>

            <p>Terms of use • Press Inquiries • General Inquiries • Investors</p>

        </div>

        <div class="footer-three">

        <img src="https://image.flaticon.com/icons/svg/185/185981.svg" width=40 height=40>

        &nbsp;&nbsp;&nbsp;&nbsp;

        <img src="https://image.flaticon.com/icons/svg/185/185961.svg" width=40 height=40>

        &nbsp;&nbsp;&nbsp;&nbsp;

        <img src="https://image.flaticon.com/icons/svg/185/185985.svg" width=40 height=40>

        </div>

    </footer>





    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

Finally, this is a small snippet where the style sheet IS working:

   <br/>

   <br/>

   <h2>Videos</h2>

   <br/>

   <br/>

   <% @videos.each do |v| %>

      <img src="<%= v.logo %>" width="110" height="110">

      <h3><%= v.title %></h3>

      <p><%= v.l_url %></p>

      <p><%= v.description %> </p>

   <br/>

   <% end %>

   <br/>

   <br/>

   <br/>

   <br/>

</div>

Any idea what might be wrong? I appreciate any tips.

edited Nov 20 '18 at 23:55

asked Nov 20 '18 at 22:53

slope

1

Are there any errors in the browsers console?
– Marvin Klar
Nov 20 '18 at 23:03

What's the path (URL) to the page where the CSS isn't applied?
– timbillstrom
Nov 20 '18 at 23:44

So I just checked the browser console, and I'm getting this error: Refused to apply style from 'localhost:4567/videos/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Do you know how I can resolve this issue?
– slope
Nov 20 '18 at 23:50

@timbillstrom it works on all paths except the "localhost:4567/upload_video"
– slope
Nov 20 '18 at 23:51

@slope Could you send a example of the URL where the CSS is in fact working?
– timbillstrom
Nov 20 '18 at 23:53

|
show 5 more comments

I'm creating a simple web application with Ruby using Sinatra, and when modifying the views, the CSS is applied to all .erb files except one. I'm not quite sure what the issue is. I've tried:

Clearing my browser cache

Running the application on a new browser (Chrome, Safari, Firefox, even Edge)

Running the application on a different device

Linking the stylesheet directly from the erb file

This is my layout.erb file

<br/>

<h2>Upload a Video</h2>

<br/>

<br/>

<form action="/create_video" method="POST">

  <div class="col-6">

    <label for="videoTitle">Video Title</label>

    <input type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter video title" name="title">

  </div>

  <br/>

  <div class="col-6">

    <label for="videoDescription">Video Description</label>

    <input type="text" class="form-control" placeholder="Enter video description" name="description">

  </div>

  <br/>

    <br/>

    <div class="col-6">

     <label for="videoURL">Video Link</label>

     <input type="text" class="form-control" placeholder="Enter link to video" name="l_url">

    </div>

    <br/>

    <div class="col-6">

     <label for="listingUrl">Company</label>

     <input type="text" class="form-control" placeholder="Enter company name" name="company">

    </div>

    <br/>

  &nbsp;&nbsp;<button type="submit" class="btn btn-primary">Submit</button>

</form>

<br/>

<br/>

</div>

My layout.erb file

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Roboto:300|Niramit|Nunito" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="style.css">

    <link rel="stylesheet" type="text/css" href="animate.css">

</head>

<body>



    <%= erb :navigation %>



    <main role="main">



        <%= yield %>



    </main>





    <footer class="end">

         <div class="footer-grid">

      <div class="footer-one">

        <p> logo<p>

      </div>

        <div class="footer-two">

            <p>&copy; Copyright Ignite 2018. All rights reserved.</p>

            <p>Terms of use • Press Inquiries • General Inquiries • Investors</p>

        </div>

        <div class="footer-three">

        <img src="https://image.flaticon.com/icons/svg/185/185981.svg" width=40 height=40>

        &nbsp;&nbsp;&nbsp;&nbsp;

        <img src="https://image.flaticon.com/icons/svg/185/185961.svg" width=40 height=40>

        &nbsp;&nbsp;&nbsp;&nbsp;

        <img src="https://image.flaticon.com/icons/svg/185/185985.svg" width=40 height=40>

        </div>

    </footer>





    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

Finally, this is a small snippet where the style sheet IS working:

   <br/>

   <br/>

   <h2>Videos</h2>

   <br/>

   <br/>

   <% @videos.each do |v| %>

      <img src="<%= v.logo %>" width="110" height="110">

      <h3><%= v.title %></h3>

      <p><%= v.l_url %></p>

      <p><%= v.description %> </p>

   <br/>

   <% end %>

   <br/>

   <br/>

   <br/>

   <br/>

</div>

Any idea what might be wrong? I appreciate any tips.

edited Nov 20 '18 at 23:55

asked Nov 20 '18 at 22:53

slope

I'm creating a simple web application with Ruby using Sinatra, and when modifying the views, the CSS is applied to all .erb files except one. I'm not quite sure what the issue is. I've tried:

Clearing my browser cache

Running the application on a new browser (Chrome, Safari, Firefox, even Edge)

Running the application on a different device

Linking the stylesheet directly from the erb file

This is my layout.erb file

<br/>

<h2>Upload a Video</h2>

<br/>

<br/>

<form action="/create_video" method="POST">

  <div class="col-6">

    <label for="videoTitle">Video Title</label>

    <input type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter video title" name="title">

  </div>

  <br/>

  <div class="col-6">

    <label for="videoDescription">Video Description</label>

    <input type="text" class="form-control" placeholder="Enter video description" name="description">

  </div>

  <br/>

    <br/>

    <div class="col-6">

     <label for="videoURL">Video Link</label>

     <input type="text" class="form-control" placeholder="Enter link to video" name="l_url">

    </div>

    <br/>

    <div class="col-6">

     <label for="listingUrl">Company</label>

     <input type="text" class="form-control" placeholder="Enter company name" name="company">

    </div>

    <br/>

  &nbsp;&nbsp;<button type="submit" class="btn btn-primary">Submit</button>

</form>

<br/>

<br/>

</div>

My layout.erb file

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Roboto:300|Niramit|Nunito" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="style.css">

    <link rel="stylesheet" type="text/css" href="animate.css">

</head>

<body>



    <%= erb :navigation %>



    <main role="main">



        <%= yield %>



    </main>





    <footer class="end">

         <div class="footer-grid">

      <div class="footer-one">

        <p> logo<p>

      </div>

        <div class="footer-two">

            <p>&copy; Copyright Ignite 2018. All rights reserved.</p>

            <p>Terms of use • Press Inquiries • General Inquiries • Investors</p>

        </div>

        <div class="footer-three">

        <img src="https://image.flaticon.com/icons/svg/185/185981.svg" width=40 height=40>

        &nbsp;&nbsp;&nbsp;&nbsp;

        <img src="https://image.flaticon.com/icons/svg/185/185961.svg" width=40 height=40>

        &nbsp;&nbsp;&nbsp;&nbsp;

        <img src="https://image.flaticon.com/icons/svg/185/185985.svg" width=40 height=40>

        </div>

    </footer>





    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

Finally, this is a small snippet where the style sheet IS working:

   <br/>

   <br/>

   <h2>Videos</h2>

   <br/>

   <br/>

   <% @videos.each do |v| %>

      <img src="<%= v.logo %>" width="110" height="110">

      <h3><%= v.title %></h3>

      <p><%= v.l_url %></p>

      <p><%= v.description %> </p>

   <br/>

   <% end %>

   <br/>

   <br/>

   <br/>

   <br/>

</div>

Any idea what might be wrong? I appreciate any tips.

css ruby-on-rails ruby sinatra

edited Nov 20 '18 at 23:55

asked Nov 20 '18 at 22:53

slope

edited Nov 20 '18 at 23:55

asked Nov 20 '18 at 22:53

slope

edited Nov 20 '18 at 23:55

asked Nov 20 '18 at 22:53

slope

asked Nov 20 '18 at 22:53

slope

asked Nov 20 '18 at 22:53

slope

1

Are there any errors in the browsers console?
– Marvin Klar
Nov 20 '18 at 23:03

What's the path (URL) to the page where the CSS isn't applied?
– timbillstrom
Nov 20 '18 at 23:44

So I just checked the browser console, and I'm getting this error: Refused to apply style from 'localhost:4567/videos/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Do you know how I can resolve this issue?
– slope
Nov 20 '18 at 23:50

@timbillstrom it works on all paths except the "localhost:4567/upload_video"
– slope
Nov 20 '18 at 23:51

@slope Could you send a example of the URL where the CSS is in fact working?
– timbillstrom
Nov 20 '18 at 23:53

|
show 5 more comments

1

Are there any errors in the browsers console?
– Marvin Klar
Nov 20 '18 at 23:03

What's the path (URL) to the page where the CSS isn't applied?
– timbillstrom
Nov 20 '18 at 23:44

So I just checked the browser console, and I'm getting this error: Refused to apply style from 'localhost:4567/videos/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Do you know how I can resolve this issue?
– slope
Nov 20 '18 at 23:50

@timbillstrom it works on all paths except the "localhost:4567/upload_video"
– slope
Nov 20 '18 at 23:51

@slope Could you send a example of the URL where the CSS is in fact working?
– timbillstrom
Nov 20 '18 at 23:53

Are there any errors in the browsers console?
– Marvin Klar
Nov 20 '18 at 23:03

What's the path (URL) to the page where the CSS isn't applied?
– timbillstrom
Nov 20 '18 at 23:44

So I just checked the browser console, and I'm getting this error: Refused to apply style from 'localhost:4567/videos/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Do you know how I can resolve this issue?
– slope
Nov 20 '18 at 23:50

@timbillstrom it works on all paths except the "localhost:4567/upload_video"
– slope
Nov 20 '18 at 23:51

@slope Could you send a example of the URL where the CSS is in fact working?
– timbillstrom
Nov 20 '18 at 23:53

|
show 5 more comments

1 Answer
1

active

oldest

votes

I think this might resolve your issue, I think the link to your stylesheets might be broken.
If the page is not in the top-path, if it looks something like this:

http://localhost/namespace/ThisIsThePage

In your layout.erb-file, you are refering to the stylesheets using:

href="style.css"

In your CSS-imports, I'd recommend to refer to the stylesheets by using e.g:

href="/style.css"

Note the slash before the filename. The slash tells the browser that the resource will loaded from the root-path of your webserver. Without the slash, the browser will try to grab the style.css from the path below:

http://localhost/namespace/style.css

answered Nov 21 '18 at 0:03

timbillstrom

1,0291224

This worked! I feel a bit silly for not linking the stylesheet correctly, thank you so much for all your help!!!! :)
– slope
Nov 21 '18 at 0:11

Glad to be at help @slope , when the browser tried fetching the stylesheets from the incorrect URL, it most likely tried fetching the Rails/Sinatra 404-page as a stylesheet resource, therefore the MIME-type error. I'd be happy if you mark the answer as accepted (:
– timbillstrom
Nov 21 '18 at 0:14

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402808%2fcss-applied-to-all-pages-but-one-ruby-sinatra%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I think this might resolve your issue, I think the link to your stylesheets might be broken.
If the page is not in the top-path, if it looks something like this:

http://localhost/namespace/ThisIsThePage

In your layout.erb-file, you are refering to the stylesheets using:

href="style.css"

In your CSS-imports, I'd recommend to refer to the stylesheets by using e.g:

href="/style.css"

http://localhost/namespace/style.css

answered Nov 21 '18 at 0:03

timbillstrom

1,0291224

This worked! I feel a bit silly for not linking the stylesheet correctly, thank you so much for all your help!!!! :)
– slope
Nov 21 '18 at 0:11

Glad to be at help @slope , when the browser tried fetching the stylesheets from the incorrect URL, it most likely tried fetching the Rails/Sinatra 404-page as a stylesheet resource, therefore the MIME-type error. I'd be happy if you mark the answer as accepted (:
– timbillstrom
Nov 21 '18 at 0:14

add a comment |

I think this might resolve your issue, I think the link to your stylesheets might be broken.
If the page is not in the top-path, if it looks something like this:

http://localhost/namespace/ThisIsThePage

In your layout.erb-file, you are refering to the stylesheets using:

href="style.css"

In your CSS-imports, I'd recommend to refer to the stylesheets by using e.g:

href="/style.css"

http://localhost/namespace/style.css

answered Nov 21 '18 at 0:03

timbillstrom

1,0291224

This worked! I feel a bit silly for not linking the stylesheet correctly, thank you so much for all your help!!!! :)
– slope
Nov 21 '18 at 0:11

Glad to be at help @slope , when the browser tried fetching the stylesheets from the incorrect URL, it most likely tried fetching the Rails/Sinatra 404-page as a stylesheet resource, therefore the MIME-type error. I'd be happy if you mark the answer as accepted (:
– timbillstrom
Nov 21 '18 at 0:14

add a comment |

I think this might resolve your issue, I think the link to your stylesheets might be broken.
If the page is not in the top-path, if it looks something like this:

http://localhost/namespace/ThisIsThePage

In your layout.erb-file, you are refering to the stylesheets using:

href="style.css"

In your CSS-imports, I'd recommend to refer to the stylesheets by using e.g:

href="/style.css"

http://localhost/namespace/style.css

answered Nov 21 '18 at 0:03

timbillstrom

1,0291224

I think this might resolve your issue, I think the link to your stylesheets might be broken.
If the page is not in the top-path, if it looks something like this:

http://localhost/namespace/ThisIsThePage

In your layout.erb-file, you are refering to the stylesheets using:

href="style.css"

In your CSS-imports, I'd recommend to refer to the stylesheets by using e.g:

href="/style.css"

http://localhost/namespace/style.css

answered Nov 21 '18 at 0:03

timbillstrom

1,0291224

answered Nov 21 '18 at 0:03

timbillstrom

1,0291224

answered Nov 21 '18 at 0:03

timbillstrom

1,0291224

answered Nov 21 '18 at 0:03

timbillstrom

1,0291224

This worked! I feel a bit silly for not linking the stylesheet correctly, thank you so much for all your help!!!! :)
– slope
Nov 21 '18 at 0:11

Glad to be at help @slope , when the browser tried fetching the stylesheets from the incorrect URL, it most likely tried fetching the Rails/Sinatra 404-page as a stylesheet resource, therefore the MIME-type error. I'd be happy if you mark the answer as accepted (:
– timbillstrom
Nov 21 '18 at 0:14

add a comment |

This worked! I feel a bit silly for not linking the stylesheet correctly, thank you so much for all your help!!!! :)
– slope
Nov 21 '18 at 0:11

Glad to be at help @slope , when the browser tried fetching the stylesheets from the incorrect URL, it most likely tried fetching the Rails/Sinatra 404-page as a stylesheet resource, therefore the MIME-type error. I'd be happy if you mark the answer as accepted (:
– timbillstrom
Nov 21 '18 at 0:14

This worked! I feel a bit silly for not linking the stylesheet correctly, thank you so much for all your help!!!! :)
– slope
Nov 21 '18 at 0:11

Glad to be at help @slope , when the browser tried fetching the stylesheets from the incorrect URL, it most likely tried fetching the Rails/Sinatra 404-page as a stylesheet resource, therefore the MIME-type error. I'd be happy if you mark the answer as accepted (:
– timbillstrom
Nov 21 '18 at 0:14

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk