Is the stylesheet connected but failing to load?

Updating an app from Rails 3.2 to version 4 has been mostly successful, but I am encountering issues with some of my stylesheets not being applied correctly. Checking the source code (ctr+U), everything appears to be linked properly:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Badge2</title>
    <meta name="description" content="Badge2">
    <link data-turbolinks-track="false" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="false" href="/assets/badges.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="false" href="/assets/framework_and_overrides.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="false" href="/assets/home.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="false" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap-transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap-affix.js?body=1"></script>
...
<script data-turbolinks-track="true" src="/assets/badges.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/home.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
    <meta content="authenticity_token" name="csrf-param" />
<meta content="0kPf5I9Ayz6yEM/RLbfyYmzTdixuoyf5Z4w9iPyuGaU=" name="csrf-token" />
  </head>
  <body>
    <header>

Upon clicking on /assets/badges.css?body=1, it is blank and as a result, its styles are not being applied. While scaffolds and framework sheets load properly, home and badges remain empty or do not load at all. What could I be overlooking?

cssruby-on-railstwitter-bootstrap

Answer №1

It appears that the solution lies in fixing this specific line:

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

The missing trailing / caused the issue.

This line was taken from an earlier version of the rails 3.2 app, where it functioned properly.

Interestingly, there were existing CSS comments in the badges.css file. However, SASS removes single-line comments (//...) but retains multi-line comments (/* ... */).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Turn only one bracket on the accordion

When clicking on a specific header, I want only one chevron to rotate instead of all the chevrons rotating. I am currently unsure how to specify which chevron should rotate individually. My project is in ASP.NET MVC 5 and I am using razor view to loop th ...

javascriptjquerycss

Align a series of divs in the center with variable width and height

I have a dilemma with my large div that contains multiple thumbnails. I am looking to center the thumbnails within the div and have the overall div centered on the page. Additionally, I want the width of the div to be flexible so that all thumbnails can be ...

csshtmlcss-floatcenter

Ensuring form input validity in real-time using jQuery's keyup event

I've been working on a form where the user can fill in an input and press enter to move to the next field. Although I have managed to get the functionality to show the next div, I am facing issues with validation... // Moving to next div on Enter ...

javascriptjqueryhtmlcss

Identifying selected shapes in CSS/Javascript by outlining them with small rectangles placed on each corner

Currently, I am working on a University Project that involves creating a selection function for drawn shapes such as rectangles, circles, lines, or triangles. The challenge lies in figuring out the visualization of the selection when a shape is clicked. T ...

javascripthtmlcss

Slider with a progress bar

Have you ever wondered if it's possible to create a progress bar using an input range? Imagine someone entering a number and the bar moves to the right, changing its background color on the left side of the thumb based on the size of the number. Check ...

javascriptcssangularjshtml

Rows that intersect - Challenging to articulate - Bootstrap 3

I'm at a loss for words when trying to describe what I'm attempting without simply showing you a picture: The issue I'm encountering is that the search box's height isn't fixed, and I might want to include other elements on the le ...

htmlcsstwitter-bootstrap-3

What is the best way to transfer a row value from one table to another and then reinsert it back into the original table

I attempted to transfer a row value from one table to another and then back to the original table, but unfortunately, I was unable to find a solution. $('#one tbody tr td input.checkbox').click(function() { if ($(this).attr('checked&apo ...

javascriptjqueryhtmlcss

`The Bootstrap Navigation Bar is not functioning properly on the published website.`

My Bootstrap Offcanvas Example navigation bar functions perfectly in my local environment. However, when I upload my build to a live website, the navigation links result in a 404 Error, indicating that the page does not exist. Interestingly, the footer at ...

htmlcssreactjstwitter-bootstrapbootstrap-5

parent div with overflowing height

I am working with 2 tabs, each displayed as flex. My goal is to have a scroll bar appear only on the list within #myTabContent if it overflows .main-panel due to the content, rather than having a scroll bar on the entire div. This way, #myTabContent should ...

htmlcssbootstrap-4flexbox

Exploring Text Color Verification with CSS in Selenium IDE

I am working on a project and want to ensure that my link is styled properly: <a class="title">My link</a> The CSS code used to style my link is as follows: a.title { color: #CC3333; } How can I confirm that the text "My link" is displayi ...

cssideselenium

Get rid of any empty space in the image preview icon

Is there a way to eliminate the white space that appears when mixing landscape and portrait images? I want the images to move up and fill the space, even if they don't align perfectly. Additionally, I would like the images to resize based on the scal ...

javascriptphphtmlcss

Issue with positioning content

Hey everyone, I'm currently developing a website and encountered an issue with placing content inside the body tag within a div element. I attempted to place the div inside the body tag, but the outcome was unexpected: https://i.sstatic.net/2zjqf.jp ...

htmlcsstwitter-bootstrap

Is it advisable to set the html root at 62.5% when using rem units in CSS? Does this imply that the default font size of browsers is 16px?

During a discussion with a group, I mentioned the 62.5% trick for scalability (setting 62.5% as font size in root and using rem units throughout CSS for easier scalability when users change default browser font size) and their arguments were as follows: " ...

htmlcssresponsive-design

Minimize the gaps between items within a CSS grid design

I'm struggling with adjusting the whitespace between 'Job Role' and 'Company Name' in my grid layout. Here's a snippet of what I have: https://i.sstatic.net/l55oW.png The container css is set up like this: .experience-child ...

htmlcsscss-grid

Transitioning background with background sizing set to cover

I have been searching for an answer to this question, but haven't found one yet. Currently, I have a series of divs with background-images set to 'background-size: cover'. My goal is to make the images zoom in and grow on hover. However, i ...

htmlcsstransitionbackground-size

The issue with the table inside a bootstrap modal is that it is not properly sized and does

I am facing an issue with a modal that has two columns. One of the columns contains a table which is too wide and requires horizontal scrolling. I need help to make the table fit into the column without any scrolling problems. The table should be able to s ...

htmlcssbootstrap-4bootstrap-modal

What is the best way to transfer data from a div tag to an li tag using JavaScript?

https://i.stack.imgur.com/se2qk.pngI am attempting to change the div tag content to li tag. Here is a snippet of the code from inspect for reference. I need to remove the div tag with the "domTitle" class. <li style="display: inline;" id="list_name"> ...

javascripthtmlcss

What is the best way to enhance the class following this condition in JavaScript?

Initially, the original script worked perfectly with just one class being added: function check_btn_charge() { if (parseInt(jQuery(".total-change-price").text()) >= 0) { jQuery(".btn-action-save-charge"+"&nbsp;"+"btn-danger" ...

javascriptjquerycssclass

How to Implement Dotted Line Styling for Row Data in ReactJS with CSS?

I'm working on a condensed design with Reactjs Monday......................08:00 AM - 21:00 PM I have a lot of dots in the display above. How can I make it shorter without using so many dots? Entering numerous dots like this is not ideal for the webs ...

cssreactjs

What is the best way to maintain the layout design when resizing the font?

Here is the HTML and CSS code snippet: .navi ul li { float:left; list-style-type: none; border-right: 1px solid #c0c0c0; margin:0px 0 0 0; } .navi ul li:last-child { border:none; } .navi ul li a { display:block; margin:0 20px; text-dec ...

htmlcss