0

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.

10
  • 1
    Are there any errors in the browsers console? Nov 20, 2018 at 23:03
  • What's the path (URL) to the page where the CSS isn't applied? Nov 20, 2018 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, 2018 at 23:50
  • @timbillstrom it works on all paths except the "localhost:4567/upload_video"
    – slope
    Nov 20, 2018 at 23:51
  • @slope Could you send a example of the URL where the CSS is in fact working? Nov 20, 2018 at 23:53

1 Answer 1

3

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

2
  • This worked! I feel a bit silly for not linking the stylesheet correctly, thank you so much for all your help!!!! :)
    – slope
    Nov 21, 2018 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 (: Nov 21, 2018 at 0:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.