CODEWITHSUNDEEP
htmlcssxampp
Nabeel Parkar
Nabeel Parkar

Reputation: 408

Why is my CSS not working properly in localhost using xampp but working fine when same files are opened locally or from a Netlify site?

So I've been working on a website for college and I'm starting to learn PHP but for that I installed xampp and tried to access the website from localhost.

By my understanding, the HTML file and images, even (some) images defined in CSS are loading but the entire CSS file is not, like float and flexbox and some padding, borders, and different types of positioning isn't working as intended. It's definitely finding the CSS file so I don't think there's a problem in my <link> tag in the <header>.

HTML header:

<head>
  <meta charset="utf-8">
  <title>Home - akiro</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

Upvotes: 1

Views: 8088

Answers (5)

WaXxX333
WaXxX333

Reputation: 486

I just had the same problem but opposite and troubleshooting with Google brought me here.

My server was working perfectly in localhost but when I tried visiting it live via Ngrok or port forwarding, I got broken pages without CSS. I read a comment in this post about visiting the CSS file directly and then refreshing and in doing so realized I couldn't visit a lot of my CSS files, and then realized I set rules in my .htaccess for rewriting. Only leaving this comment so if anyone makes my mistake and finds themselves here like I found myself here, check your .htaccess.

Upvotes: 0

John Rhoy Gadot
John Rhoy Gadot

Reputation: 74

Just clear your browser's caches and done!

Upvotes: 0

JL Griffin
JL Griffin

Reputation: 423

As Doc-Han Stated this is most likely caching, and its an issue I think most of us have run into during the UI development process.

One thing you can do to get around this, is to open and do your debugging in an incognito window which wont cache files and can be reopened to load new sets if session caching does occur.

Alternatively some code editors have an in-built web server instead for this reason. I've been using Adobe brackets for a couple years now and love it. It serves the pages using an internal Node server and as a result, they have it set up for real time code updates. Changes to the code are reflected in real time which i find helps a lot in dealing with UI development flow for me avoiding issues like this and just the saved 3-5 seconds of refreshing each time i make a change (which adds up when your making 5000 changes Im certain other editors offer something like this as well.

Upvotes: 2

Berend
Berend

Reputation: 128

Quite some possibilities why it's not working as expected:

  • As Doc-Han stated; an old version of the css my have been cached.
  • You're loading the css from a relative path: style.css. This means the css should be in the same folder as the html file. Maybe the css should be loaded from '/style.css' or '/resources/style.css' or another location
  • Maybe the css contains some simple typo's so you're applying 'flaot' instead of 'float'

Inspect your page through your browsers developer tools. Open the console. Check if there are there any errors. Check if the css did load, also check if the right version was loaded. Check if the styling rules are applied to the right html elements or are applied at all. If it is a caching problem in Chrome you can open the dev tools, open the Application tab, click the 'clear storage' menu item and clear site data. Now reload the page. In the network tab you can also click 'disable cache' and reload the page.

Upvotes: 1

doc-han
doc-han

Reputation: 736

This is just because with Xampp the browser caches your CSS files. This means that if making changes to the file, the browser will still access the cached file rather than the new one. A simple trick is to open the CSS from the local server and refresh the page so that the new CSS will be used. example open localhost:8080/project/css/style.css and refresh that page

Upvotes: 2

Related Questions