Updated to Apache 2.4 and now my style sheets do not load

I’ve configured Apache 2.4 exactly as the previous version, updated to PHP 8, but now no stylesheets are loading, just html. Using developer tools in Edge (and other browsers) I can apply the styles and everything looks fine. AddType text/css .css is included in my config file. Sites look fine online. It’s only when I open in localhost. I’ve looked for answers everywhere. I see many others have had this same problem. Many answers provided, but none work. Any ideas what the problem might be? What am I missing?

What’s your browser saying is happening to the network requests for the CSS data?

I don’t understand your question. What’s my browser saying? Explain.

Hit F12 in your browser, go to the Network tab, and refresh the page. Check to see what the CSS file is returning, and if there are any console errors.

exemplar:


The top is an example of a CSS stylesheet getting fetched, and the bottom is an example of errors that appear in the console.
If it’s returning 200, it got the file.
If it’s returning 404, the file is considered missing
If it’s returning 500 (or some value starting with 5), the server config had a problem.

I’m exploring this right now.
4:00 PM - I’m not seeing what you are.
Here’s my live site (this is just one, but I have the same problem with all of my sites Everything works fine on the live sites. It’s only when I load from htdocs):

What m_hutley posted was just an example of some console output demonstrating a successfully loaded stylesheet and some console errors.

On your site running locally (i.e. on localhost) could you:

And see if there is anything that gives you a clue as to why the stylesheets aren’t being loaded properly.

If the console doesn’t provide any clues, here are a couple of other troubleshooting steps you might consider:

  • Check the .htaccess file: Make sure your .htaccess file (if you have one) isn’t blocking the loading of CSS files.
  • Ensure correct permissions: Verify that the CSS files have the correct permissions and that the Apache user can read them.

And remember to restart your Apache server after making changes to its configuration.

Hi, thanks for the reply. Welp, this problem only arose when I upgraded to the latest Apache (2.4) and PHP 8. Everything worked fine prior to that. I don’t have an .htaccess file, and the live sites work fine (having the same problem with all my sites). My stylesheets are stored in a folder named “CSS”, accessed from index.php using a variable ($styles=).
I keep thinking it has to be an Apache config or PHP config problem, but I have compared both configuration files with the old ones and can’t find a difference. This is a real head scratcher! It’s driving me nuts!

No worries :slight_smile:

What are you seeing in the console? (as described above)

This will probably give you the most clues as to what is going wrong.

If you don’t answer the questions but only reply the same useless error description again and again, we will not be able to help you.

Hutley has explain it in very low details how to answer the questions in post #4. if you are not able to follow his advice tell us why.

This is not the network tab…

Hi, thanks for your reply.
He asked: “What’s your browser saying is happening to the network requests for the CSS data?” I didn’t understand his question. I hit F12 and tried to find something that looked like the screen shot he posted. Couldn’t find anything like it.
I’m not sure what I’m supposed to look for and where to look, and I see nothing that gives me any clues as to any problems. As I said previously, this only arose when I installed the latest Apache version and upgraded to PHP 8. I have searched the Internet and see many people have had this problem, but I haven’t found any clearly stated explanations or solutions. I think many just give up asking.

This is what I get when I open Network tab:

Cool. You found the correct tab.

Assuming you are on the local version of your website (lc.kinsmanwebdesign.com), can you do the following:

  • Open the dev tools (F12)
  • Select the Network tab (as above)
  • Detach the network tab from the current window (click the three dots in the top right hand corner and select the symbol that looks like two boxes on top of each other)
  • Maximize the dev tools window to take up the whole screen
  • Press Ctrl + R to reload the page
  • Take a screenshot of what you can see on the dev tools (network tab)
  • Post it here

Thank you for your help. Here’s what I got:


Let me re-state once again, just to be clear:

  1. This is not a new site, but years old. This problem didn’t arise till I installed latest Apache version 2.4 and PHP 8.
  2. Live site works fine. Problem is only when loading from htdocs (local host).
  3. Style from W3C (hamburger menu) is loading fine.
  4. The issue is with all my sites, not just this one, and no issues if I paste style sheet directly into HEAD of document.
    For all of the above reasons I’m convinced this is a server or PHP configuration issue, not an html, php, or css issue in my coding.
    I have never used the browsers developer tools much, so I apologize for my lack of understanding in that area. I currently use Edge, but same issue is on all browsers.

Yup, it’s a server issue.

These are two different sites hosted on two different servers. The problem is with your local install of Apache.

The exact issue can be seen in the bottom left hand corner of the screenshot: 8 requests 0B transferred.

For whatever reason Apache isn’t sending your style sheets to the browser.

You can debug this further if you click on one of the failed requests (in red) and inspect the request and response.

Could you do that and post a couple of screenshots of what you see.

Based on that Network result… nothing. According to what we see there, the server sent exactly nothing to the browser, so there should be nothing on screen. No HTML, no CSS, nothing.

The problem with that statement is, if there’s no HTML, why is it trying to pull 7 other addresses?

Out of curiosity I loaded the site in FireFox and hit F12. Here’s what came up:


So, the server is not recognizing my stylesheets as type=“text/css”, even though I have placed that in the code (this site doesn’t like angle brackets for some reason) link rel=“stylesheet” type=“text/css” href= … as per W3C (I noticed in their example they don’t even include “type” anymore).
So, the problem becomes, why, and how to fix it. This is strange indeed!

See my reply to James Hibbard.

Are you 100% sure that that path is accurate and the file is in that directory?

If you go to that URL directly (http://…(leaving it out to avoid the forum processing the URL…)./CSS/global.css), do you get your CSS file?

The message would indicate that the server responded with an HTML page; either means its spat an error screen at you, or a 404 html.

If it’s spitting an error screen, the server’s error log should tell you what went wrong.