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

How to Use AJAX, jQuery, and JSON to Send an Array to PHP

I'm attempting to send an associative array through AJAX $.post to a PHP script. Below is the code I am using: var request = { action: "add", requestor: req_id, ... } var reqDetails = $("#request_details").val(); ...

Enhancing Tabulator tooltips with custom CSS styles

Is there a way to style the tooltips that appear when hovering over cells in my Tabulator table? When I set tooltips:true, Tabulator adds a title tag, but applying CSS inline has been tricky. So far, I have tried: div[title]:hover:after { content:attr( ...

The onClick event is not functioning properly with React's select and option elements

Looking for a way to get the option value from each region? const region = ['Africa','America','Asia','Europe','Oceania']; <div className="options"> <select> ...

How can the label value be updated in a material ui slider component?

code snippet: https://codesandbox.io/s/runtime-worker-kxse3?file=/src/App.js Can anyone help me ensure that the labels in the bubble display the same values as the text (3, 5, 7, 10)? ...

issue with the margin-bottom property not functioning as expected

Question about CSS code: .dropdown-menu { position:absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; background-color: #ff ...

Is it necessary for me to replicate this function? - jQuery

I have developed a function that creates a transparent information overlay on a current div for a mobile web app. Context: I am using jQTouch, which means I have separate divs instead of loading individual pages anew. $(document).ready(function() { ...

Is there a way for me to identify the value within useCallback without any intermediaries?

How can I ensure that console.log('success') is triggered when the ids of myFood[myFood.length - 1]?.id and viewableItems[viewableItems.length - 1]?.item?.id match? Despite both values being equal, there seems to be an issue preventing console.l ...

Background Services in the Moment

Currently in the process of developing a mobile application with the Ionic framework that utilizes Laravel 4 REST API for CRUD operations on a MySQL database. As per the requirements of the app, it needs to constantly communicate with the backend service t ...

sending data from angular controller to a node server

Having trouble with my Angular controller that posts to the node server. The function triggering the post is giving me a 404 (Not Found) error when running it. I've tried rewriting the post multiple times but can't seem to locate the issue. If ...

Exploring the Observable object within Angular

As I delve into learning Angular through various tutorials, I encountered a perplexing issue regarding my console displaying an error message: ERROR in src/app/employee/employee.component.ts:17:24 - error TS2322: Type 'IEmployee' is not assignab ...

Creating grid layouts in Bootstrap 4 with buttons

Recently, I've delved into Bootstrap 4 and HTML5/CSS. My goal is to design a text area with two buttons located on the side (horizontally centered) like this: https://i.sstatic.net/TnHSy.png Below is the code snippet that I have so far: <link ...

What could be causing the spinner (Bootstrap 5.x) to not show up on the screen

I'm having trouble getting a spinner to show up when a user clicks a form submit button. Below is the HTML code to add a <div> for the spinner: <div class="pageloader"> <img src="../images/loader-large.gif" alt ...

Error: Trying to access property '1' of an undefined value is not allowed

I'm experiencing a problem that I can't seem to solve. The issue arises after the user logs in. I am using useEffect() to retrieve the user data by using a secret token from localstorage. Everything seems to be working fine - the data, the secret ...

Ensure that the pseudo element inherits the background color of its parent

My dilemma involves multiple pseudo elements connected to diverse parent divs, each with a unique background color. My goal is for these before and after pseudo elements to mimic the background color of their respective parent divs without the use of Jav ...

The present IP address of the client through AJAX and PHP

This code snippet is on my PHP page: // Setting the timezone to Asia/Manila date_default_timezone_set('Asia/Manila'); $date = date('m/d/Y h:i:s a', time()); if (!empty($_SERVER['HTTP_CLIENT_IP'])){ $ip=$_SERVER['HTTP_C ...

Material UI allows for the creation of numbered lists with ease. This

<List> {instructionList.map((el) => ( <ListItem divider key={el.id}> {el.type === 'number' ? <React.Fragmen ...

"Encountering an error message stating "Cannot access SpreadsheetApp.getUi() within this context" when attempting to execute the

I've encountered an issue while trying to access the UI object in Apps Script. The code I'm using is something I've used before without any problems, but now I'm getting an error message that says "Cannot Call the .getUI()" method from ...

Calculating the total number of records in a MySQL database using PHP can be achieved by

I need help with counting all rows in a dataset and displaying the number as part of a small statistic later on. Currently, I'm facing an issue where my PHP code is not returning the correct number of rows. The HTML echo works fine when displaying te ...

npm is unable to install a forked git repository in its current state

Attempting to install a customized version of ng2-smart-table on my application, but npm seems to be struggling with the process. I've experimented with various commands such as npm install git+http://github.com/myusername/ng2-smart-table.git npm i ...

Why do two date type variables have identical content?

I'm trying to grasp why the value of d1 changes in each alert(). Any insights would be greatly appreciated. Thanks! <script> d1 = new Date("01/01/2015"); d2 = d1; alert(d1); d2.setDate(d2.getDate()+10); alert(d1); </script> ...