When encountering a 404 redirect, CSS and JS files may fail to display

I created a unique error message using .htaccess, incorporating CSS and JS in separate folders. Although it functions properly when accessed directly, integrating these resources into the 404 Error message results in only the HTML text being displayed without the accompanying styles or scripts.

ErrorDocument 404 /error/index.html

Even after attempting:

ErrorDocument 404 /error/

The issue persists unresolved.

Answer №1

The reason for this issue is due to the use of relative links in your files, along with utilizing different directories for your web documents.

To resolve this problem, you can:

Place your custom 404 page in the root directory of your website.

Alternatively,

Include a base tag in each of your HTML/PHP pages and set the root as the default base. For more information on the base tag, click here.

Another option is to:

Manually adjust the relative links on your 404 page. For example, utilize code like

<link rel="../your-css-dir/your-file.css">

Make sure to apply the same changes to your JavaScript file as well.

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

Is it possible to use an :after background-image to layer on top of the following element?

Seeking assistance on adding an image as a :after element to a navigation bar. The goal is for the image to cover the top portion of the next section according to the design. I have set the :after element as position: absolute with a top: 100%, but it app ...

How come my invocation of (mobx) extendObservable isn't causing a re-render?

Can't figure out why the render isn't triggering after running addSimpleProperty in this code. Been staring at it for a while now and think it might have something to do with extendObservable. const {observable, action, extendObservable} = mobx; ...

Using the class for jQuery validation as opposed to the name attribute

I am looking to implement form validation using the jquery validate plugin, but I am facing an issue with using the 'name' attribute in the html since it is also used by the server application. Specifically, I want to restrict the number of check ...

The callback function in JavaScript is not updating AngularJS unless it is written in shorthand form

Within an angular controller designed for user login functionality, the code snippets below are extracted from an angular-meteor tutorial: this.login = function() { Meteor.loginWithPassword(this.credentials.email, this.credentials.password, (e ...

Unexpected Error: Unable to access the 'position' property of an undefined element (D3.JS)

This error occurred when I attempted to fetch JSON data and convert it into a line graph. An unexpected TypeError was thrown: Unable to access the 'position' property of undefined Below is the relevant portion of the JS code: d3.json("../js/ ...

What is the correct way to navigate data through my Node.js API?

I am struggling with getting the JSON response to display at the /api/orders_count endpoint. Here is a breakdown of my setup: In my project, I have various files: Routes file - where the orders_count route is defined: routes/index.js const express = req ...

Creating a CSS animation to slide a div outside of its container is

I currently have a flexbox set up with two adjacent divs labeled as DIV 1 and DIV 2. By default, both DIV 1 and DIV 2 are visible. DIV 2 has a fixed width, occupying around 40% of the container's width. DIV 1 dynamically adjusts its width to ac ...

Is there a way to create an event listener that responds to a simultaneous click of both mouse buttons?

Despite my extensive research on the Internet, I was unable to find any examples. Interestingly, Vue only supports right and left clicks separately which I find peculiar as it seems like a basic task that can easily be accomplished with plain Javascript. ...

HTML5 canvas game issue: background fails to load

I'm a beginner at designing games using HTML5 canvas. I've been following a tutorial on creating games in the style of Angry Birds from the 'pro html5 games' book. I've completed all the steps in the tutorial, but I'm facing a ...

Generating a PDF file from an HTML and CSS page can be done without relying on APIs or libraries, by leveraging the

Is there a way to directly convert an HTML page generated using PHP and CSS into a PDF format without the use of libraries? I have come across multiple libraries that can accomplish this task, but I would prefer not to rely on any external libraries and i ...

The bootstrap switch button remains in a neutral grey color

Ordinary: Initially clicked: Click again: After the second click, it remains grey and only reverts on a different action like mouse click or selection. Is there a way to make it go back to its original state when unselected? ...

Unraveling the mysteries of an undefined entity

When the variable response is undefined, attempting to retrieve its property status will result in an error: Error: Unable to access property 'status' of undefined const { response, response: { status }, request, config, } = error as A ...

Redis: Unable to establish a connection as net.connect is not recognized as a

I'm struggling to integrate Redis with nodejs Encountering issues during execution Despite using the same code, I am facing this error: Here's my code snippet: import { createClient } from 'redis' export const client = createClient({ ...

Encountering difficulties while using JavaScript to complete a form due to issues with loading the DOM

Currently, I am attempting to automate the completion of a multi-page form using JavaScript. Below is the script that I am utilizing: // Page 1 document.getElementById("NextButton").click(); // Page 2 completion(document.getElementById("Rec ...

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

JavaScript JQuery alert popup fails to display

I have been attempting to create an alert pop-up using JQuery that will display when a user clicks on submit without filling out the form. However, when I test my code by leaving the form empty and clicking 'submit', the page just refreshes with ...

Nextjs unexpectedly displays blank page upon fetching data from Firebase Firestore without any error messages

I am currently facing an issue when trying to retrieve page details from Firebase Firestore using getStaticPaths and getStaticProps in my Next.js project. Despite following the code structure correctly, I am encountering a scenario where the page appears e ...

Employing jQuery Mobile with MVC3 for seamless auto-submit functionality

When I remove jQuery Mobile, the code works perfectly! The form: @using (Html.BeginForm("SearchTown", "Home", FormMethod.Post, new { id = "TheForm1" })) { @Html.DropDownList("TownID", (SelectList)ViewBag.TownId, "Select a Town") } The Javascript: & ...

Using ngFor results in duplicate instances of ng-template

I'm facing a challenge with the ngFor directive and I'm struggling to find a solution: <ng-container *ngIf="user.images.length > 0"> <div *ngFor="let image of images"> <img *ngIf="i ...

Show a variety of pictures using React

Is it possible to repeat an image (e.g. photo.jpg) n times in Reactjs using a provided value for n in props? If yes, how can this be achieved? function Card(props) { for (let i = 0; i < props.rating; i++) { <img className="star" src ...