One particular page is having trouble loading CSS, whereas it loads perfectly fine on a different page

I have two pages, 403.html and 404.html, both of which need to load the same style.css file. Strangely, when I visit the 403.html page, the CSS loads perfectly fine. However, when I navigate to the 404.html page, even though it has identical code with only minor text changes, the CSS fails to load and the page appears as plain text. Both pages have the same path to the CSS file. Can anyone explain why this is happening?

Here is the structure of my folders: 


|-errors
|     404.html
|     403.html
|--   css
|        style.css
|        style-mobile.css
|        etc...
|-site1
|-site2

The addresses of the pages are as follows: 79.143.188.169 will take you to the 403.html page. 79.143.188.169/test will take you to the 404.html page.

htmlcss

Answer №1

An error was found in your 404 page where the links are:

/errors/js

The correct links should be:

/js

To resolve this issue in your HTML, update the code from:

<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>

To:

<script src="errors/js/skel.min.js"></script>
<script src="errors/js/init.js"></script>

By making these changes, you can fix the errors!

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

Choose the element excluding a particular child

My issue is: I have a div with multiple children and I am trying to figure out how to exclude a specific element that is a child of the previously selected element. I attempted using the :not(selectedElement) selector as well as the .not(selectedElement) ...

jqueryhtml

Is it possible to have the Target='_blank' attribute open the link in a new window instead of a new tab?

Is there a way to achieve this? When using Firefox, the link opens in a new tab, which I prefer to avoid users having to adjust settings in their browsers. I am looking for a solution where a pop-up contact form appears whenever a user clicks on 'co ...

javascripthtmlbrowser

Looking to align a radio button in the middle of an inline-block?

Is it possible to center a radio button within an inline-block? I have provided a demo on JSFiddle that displays the current layout and how I envision it should appear. Check out the demo here Here is the code snippet in question: <span style="widt ...

htmlcss

Is it possible to adjust the CSS code linked to the HTML tag based on the specific webpage being viewed?

I am facing an issue with the homepage of my website, which uses Scrollmagic.js for smooth scrolling. In order for the sticky footer CSS to work properly on all other pages, the HTML tag needs to have a height of 100%. However, if I add this height value t ...

javascriptjqueryhtmlcss

What steps can be taken to avoid the div sidebar overlapping with the content on the

I am currently facing an issue with my website where the div sidebar scrolls with the page and overlaps the page content whenever the window is resized. To see a demonstration of the problem, you can visit this link: Below is the CSS code for the menubar ...

csshtmlsidebaroverlapping

Steps to set up datetimepicker with varying date ranges for several input fields

I am having trouble getting a new date range for each text box in my form. It seems to only return the date range from the last textbox, even though I have made the textbox IDs dynamic. I have both start and end dates for each textbox and I have calculated ...

javascriptphphtml

Creating a responsive design using Bootstrap4

Today, I made the switch to bootstrap4 and enabled flexbox in _variables.scss. However, I'm still confused about the flexbox capabilities of bootstrap4. Some questions I have include: How can I utilize flex-direction:column? Is it possible to creat ...

csstwitter-bootstrapflexboxtwitter-bootstrap-4bootstrap-4

Detect when a user's mouse is hovering over an iframe and escape the iframe accordingly

When the iframe window is visible, there are no issues. However, if the iframe window is set to 0px X 0px in order to hide it while still loading, consider redirecting the iframe or not displaying it at all. In case something is loaded within an iframe or ...

javascriptcssiframe

How can I force a variable width font to behave like a fixed width font in HTML?

Is there a method to emulate the appearance of a fixed-width font using a variable width font in HTML? For instance, if I were to display the phrase "The quick grey fox jumped over the lazy dog" in "Courier New," a fixed-width font, it would appear wider ...

htmlcsstypography

Adjusting the visible options in ngOptions causes a disruption in the selected value of the dropdown menu

I have successfully implemented a feature that allows users to convert temperature values displayed in a drop-down menu to either Celsius or Fahrenheit. For this functionality, I am using a select input with ng-options as shown below: <select ng-model ...

javascripthtmlangularjsselectng-options

Utilizing Jquery's fadeIn() function to make elements appear gradually on the webpage, whether

New Question: Is there a way to smoothly transition the visibility of a div element without using display:none or CSS, as these methods remove the div from view rather than simply hiding it, causing elements below to shift? If I try setting opacity:0 or v ...

jqueryhtmlcss

What is the best way to add animation to the hide/show function?

<div class="overlay"></div> CSS: .overlay::after { position: fixed; top: 0; left: 0; width: 100%; content: ""; z-index: -1; height: 100%; transit ...

htmlcss

"Dynamic" visual in a Vue.js development scheme

Utilizing Vue.js for the development of a hybrid mobile application has been my current focus, with the Quasar framework serving as a key component. Recently, I incorporated an image into the application using the <img /> tag and utilized the followi ...

javascriptcssvue.js

Can sweetalert2 be used as a tooltip?

I have a query, is it feasible to include a tooltip in the alert message? Alternatively, could there be another tooltip option available? Swal.fire({ title: '<strong>An example with HTML tags</strong>', icon: 'info', ...

javascripthtmltypescriptsweetalertsweetalert2

Using jquery to dynamically set the value of a drop down menu

I am struggling with a dropdown list that is being generated dynamically using ajax when the page loads. Additionally, I have a PHP variable that holds the default selected value. However, despite my attempts to select this value, it does not work as expec ...

phpjqueryhtmldrop-down-menu

Animating toggles with JQuery

I am attempting to create a toggle effect for my div using this jQuery script: $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}; }, function() { $("div").animate({left:'0px'}; }, }); ...

javascriptjqueryhtmlcss

The primary division grows continuously in size

Currently setting up a basic layout for my homepage. Here's how I envision it: Having trouble defining the size of the main div. I want it to dynamically expand in both height and width, filling the remaining space not taken by menu and footer. HT ...

htmlcsslayout

Resolving formatting challenges in R markdown with Blastula

Dealing with formatting problems while trying to include an R markdown file in an email body. As a CSS novice, I'm struggling to find a solution and it's becoming quite frustrating. The table has the following CSS styling: <!DOCTYPE html ...

cssremailmarkdownblastula

Solving issues with flexboxes in Safari 5.1.7 on Windows

I am currently utilizing flex boxes for managing the layouts of my website. However, it seems that the Safari version for Windows (5.1.7) is outdated and causing all flex boxes to be dysfunctional. On MacOS systems, the same version 12.x works correctly. ...

htmlcsssafariflexbox

How can I align the CSS Horizontal Menu directly under the parent menu instead of its current incorrect x-position?

I am working on creating a horizontal drop-down menu using CSS. However, I'm facing an issue where the submenu either appears all the way to the left of the website (when I use position: absolute) or directly to the left of the menu (when set to posit ...

cssmenupositioning