CSS is broken when transitioning from the development to the live site

After configuring the CSS for this site using CodeIgnitor, I placed it in the specified location:

{link rel="stylesheet" type="text/css" href="<? echo base_url();?>application/assets/css/public.css" />

Although Firebug confirms that the link is correct, I am constantly encountering 403 errors when attempting to load it.

Looking at my .htaccess file, I must admit that I am not entirely sure what I'm supposed to be seeing:

RewriteEngine on

RewriteCond $1     !^(index\.php|images|robots\.txt|application/assets/js|application/assets/css|application/assets/images)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./index.php/$1 [L,QSA]

RewriteCond $1 ^(images|js|css)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./public/$1 [L,QSA] 

Is there a solution to make this CSS file successfully load?

Additional Information: Apart from the css folder, there are also js and images folders within the assets directory, but even the favicon is not being fetched from the images folder as expected.

Answer №1

It appears that the settings on either the folder or the server are preventing you from reading the file.

Learn more about HTTP 403 errors here.

To troubleshoot, try directly accessing the css file to see if you receive a 403 error, indicating permission issues.

Accessing your development site remotely instead of locally may also reveal the same error.

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

Refresh the content with an embedded iframe

I am attempting to update the body content by removing all existing content and inserting an iframe: function create_custom_iframe(target){ var iframe = document.createElement('iframe'); iframe.setAttribute('id', 'target_u ...

The top margin is experiencing issues and is not functioning correctly

I'm struggling to identify the problem with this script: http://jsfiddle.net/AKB3d/ #second { margin-top:50px; ... } My goal is to have the yellow box positioned 50px below the top border of the right box. However, every time I add margin-top to ...

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

In my code, I am using a TimelineLite() to perform a series of sequential tweens with .to(). What I want to achieve is accessing the output value from one of the early tweens in order to use it for constructing later tweens. Is there any way to retrieve t ...

PHP Email Form Data Submission

I've been struggling to get a form set up that will send the information to the admin upon submission, but so far, nothing seems to be working. I double-checked my junk and spam folders, and even made sure that $admin_email = "" is correctly set to th ...

Saving several inputs with incremented values

I'm facing an issue with saving data from multiple input fields in a for loop: <input type="number" name="device_id_1"> <input type="number" name="device_id_2"> ... <input type="number" name="name_1"> <input type="number" name="n ...

Can you determine the height of an image if only the width and border width are provided?

Currently delving into the world of HTML and CSS, I've successfully configured the img element's width and border width using a style element. However, one aspect that is still puzzling me is how the height is calculated in this scenario. I&apos ...

Conceal the overflow from absolutely positioned elements

I've gone through all the similar examples but still struggling to find the correct solution. My issue involves a basic Side Menu that toggles upon button click. Within the menu, there is a list of checkboxes positioned absolutely with the parent con ...

`Animate your divs with slide in and slide out effects using

Currently, I am in the process of replicating a website and facing some challenges. This site is my inspiration for the project. I have managed to create a sliding effect using CSS, making the div slide in and out from the same direction. However, I want ...

Is there a way to utilize the reset() function within an input form?

Is there a way to automatically reset the textbox when submitting a value? Below is my code: <!DOCTYPE html> <html> <body> <ul id="myList"> </ul> <input type="text" id="myText" value="&q ...

What is preventing me from concealing my input field when its type is set to "file"?

I've been attempting to conceal my input field of a file type, but even with the hidden attribute, it refuses to hide. Interestingly, once I remove type="file", the code successfully hides itself Does anyone have insight on how I can hide ...

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

How can I display selected cities on a different webpage after clicking a button? Currently, I can only get the results on the same page. For example, if a user selects NYC and Delhi, those cities should be displayed on another HTML page. ...

Is there a way to incorporate text fields and input in BootstrapDialog?

Is it possible to include text fields and inputs within this modal using BootstrapDialog without modifying the library? Additionally, can I use $.ajax() inside? <button class="btn btn-primary" id="add_item">New item</button> jquery $('# ...

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

Looking for a way to set custom buttons on ion-select through interfaceOptions in ionic 4? HTML <ion-item> <ion-label>Lines</ion-label> <ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOption ...

Verifying the status of a checkbox label in Java using Selenium

I am currently working on an automation project using Selenium and I'm struggling to figure out how to check the status of a checkbox input. Has anyone else encountered this issue before? Here is a sample code snippet in JavaScript with jQuery: $("i ...

My CSS horizontal drop-down menu is causing the sub-navigation items to overlap each other

I'm having an issue where my sub navigation menu items are stacking on top of each other instead of displaying properly. Here is the code snippet causing the problem: /* STYLING FOR NAVIGATION MENU */ .nav-bar { width: 100%; height: 80px; ...

Can you explain the concept of "cascading" within CSS?

Can someone kindly explain the specific definition of "Cascading" in Cascading Style Sheets (CSS)? I have heard conflicting perspectives on this topic, so I am seeking clarification here. Any examples to illustrate would be greatly appreciated. ...

What could be causing the last LI to drop onto a new line when floating UL to the right?

I'm currently working on creating a horizontal navigation that needs to align to the right side of the page. However, when I float the navigation to the right and then float all the list items to the left, the last item in the list breaks onto a new l ...

How can I turn off shadows for every component?

Is it feasible to deactivate shadows and elevation on all components using a configuration setting? ...

Steps for Sending Data Using a URL

I am having trouble deleting a row based on its id. Below is the code I am using: <tr> <th>ID</th> <th>Nom etudiant</th> <th>Prenom etudiant</th> ...

Tips for circumventing the use of responsive tables in Buefy

I am facing a challenge with displaying data in a Buefy table in a way that it appears as a conventional table with columns arranged horizontally on all devices, rather than the stacked cards layout on mobile. In order to accommodate the content appropriat ...