Member Avatar for Nathaniel10

Hi. This is not a frequently browsed category, but there is no place else for my question.

I am organizing my site to make it easier and faster to maintain. I keep a small version of my site on my laptop running Apache/PHP. I successfully organized and recoded things to the way I wanted. The root has only the homepage (index.html). I have the style.css file, image files, and header and footer files in a folder called Style. I have pages such as 'About Us' and 'Contact Us' in a folder called Fold_1.

In my aboutus.php file, I access the header and footer files using

<?php> include ('../style/header.php') ?>

In the header.php file, I access the style sheet and images using

< (...) href = "../style/style.css">

In the style.css file, I access the background image using

{background-image:url('bgimage.gif');}

This works perfectly in Apache/PHP on my laptop.


When I uploaded files coded this way to my live site, NOTHING WORKED. The pages like aboutus.php had no CSS formatting, and no code from the header or footer. It was as if the file was not locating any of the styling files. I was able to have the file find the header and footer by changing the address to

<?php> include ('') ?>

However, the CSS formatting was completely off. The positions of the divisions (left, center, right) were skewed. The positions of the links in the navigation bars in the header and footer were justified left instad if positioned in the center. The paragraph tags within a division were not following their positions or inline styling. I am unable to achieve the formatting I want on the live site, despite many hours of trial and error.

What is going on? Why is it that what works in Apache on my laptop is NOT working in Apache on my service providers server (One and One)? Please help!

  • 2 Contributors
  • 4 Replies
  • 235 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Nathaniel10

Dani AI

Generated

Good troubleshooting so far — 's pointer about path/case differences and 's tests narrowed the missing-file problem. Layout still looking different on the live host is common and usually caused by environment differences rather than a single "CSS bug." The checklist below targets the things that most often change layout when moving from a local Apache to a hosted Apache.

  • Confirm the stylesheet is actually being fetched as the same file that works locally: use the browser Network panel. A 200 response can still be the wrong file (an HTML error page, a redirect, or a cached old copy).
  • Check response headers for the stylesheet: the server should send a correct Content-Type (text/css). Some hosts add filters that change or block files.
  • Inspect computed styles in DevTools to see which rules are applied and which are missing or overridden; that shows whether the live CSS is incomplete or if another stylesheet is competing.
  • Verify that images referenced from inside the CSS resolve relative to the CSS file’s location on the server (not the PHP include file). Missing background images can change layout.
  • Look for BOM or stray output before the DOCTYPE (common when including PHP files saved with a BOM or with accidental whitespace). That can trigger quirks rendering in some browsers.
  • Clear browser and server/CDN caches and confirm file permissions are readable by the webserver.

Quick diagnostics to drop on the live site (place temporarily after the include to see server paths and headers):

<?php
echo 'DOCUMENT_ROOT: ' . $_SERVER['DOCUMENT_ROOT'] . PHP_EOL;
echo '__DIR__: ' . __DIR__ . PHP_EOL;
echo 'SCRIPT_FILENAME: ' . $_SERVER['SCRIPT_FILENAME'] . PHP_EOL;
?>

And from a shell to check headers:

curl -I -L -s -S https://example.com/path/to/style.css

Practical fixes: serve files without a UTF-8 BOM, ensure a proper DOCTYPE to avoid quirks mode, isolate the problem with a minimal test page that links only to the live CSS, and compare the live file with the local one (checksum or byte-for-byte). These steps usually reveal whether the issue is delivery, encoding, path resolution, or HTML markup.

Recommended Answers

All 4 Replies

Member Avatar for hielo

Check your file case. In other words, if your folder/file is named Style (uppercase "S"), make sure you are not using
< (...) href="../style/style.css"> (lowercase "S")

Edited by mike_2000_17 because: Fixed formatting
Member Avatar for Nathaniel10

Hielo,

Thank you for your prompt reply.

On my laptop I did check for case and found that my Apache server was case INsensitive. I have NOT checked for case sensitivity on my live site server. I will do that later today. I have upper case first letter for the folder names. I am pretty sure I used all lower case in the file paths. It has never been a problem for linking the different pages of my site.

Still, the layout is messed up. If you are correct, then I have a second problem with how my CSS layout is being rendered in HTML.

Member Avatar for hielo

IF your /Style/ folder is directly under your DOCUMENT_ROOT - ex:
then instead of using ../Styles/ start the path reference with a slash - meaning, drop the dots. That way the search path will begin from DOCUMENT_ROOT: ... href="/Styles/styles.css"...

Member Avatar for Nathaniel10

I tested my site's server for sensitivity to case in the file paths. I discovered that it is. Matching the folder name EXACTLY, case included, solved the problem of not finding the layout files.

That leaves the problem of my CSS formatting is so messed up. I actually discovered why. I ask for help in another thread.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.