Stylesheet Reference Problem on My Localhost Server

[equipment]

When the front page of the project is visited, the CSS path will be referenced properly and the stylesheets will also work

 

http://localhost/myroot/denbix/

 

with the stylesheets reference example

 

<link rel="stylesheet" type="text/css" href="view/style.css" />

 

Though, the same will not work on a sub page of the project, with the following example path

(and with the same stylesheet reference in the header)

 

http://localhost/myroot/denbix/model/contribution/knuffix_list.php?cat=All

 

I use Apache 2.2.17 with Windows.

 

Any ideas why this problem is occurring and how to solve it?

 

[MarPlo]

Hi,

You can an absolute path for the '.css' file:

<link rel="stylesheet" type="text/css" href="http://localhost/myroot/denbix/view/style.css" />

 

Or, try add a <base> for all relative paths, in the Head zone of the html document generated by 'knuffix_list.php':

<base href="http://localhost/myroot/denbix/" />

[equipment]

Thank you a lot, it is something I broke my head over and still can not make sense out of the situation.

 

Why does this problem occur, why is there a difference between the localhost server an the web host server?

 

The one I can think of the difference between Linux and Windows.

 

I am wondering do you think I would experience these type of problems on Linux as well?

[haku]

It has nothing to do with the hosting environment.

 

Absolute URLs will not work between systems, since the location will be different between the two systems:

 

http://localhost/some_folder/some_path/style.css

http://my-site.com/some_path/style.css

 

As you can see, they are different, so the file will not be found. You were trying a relative reference:

 

some_path/style.css

 

You can fix this problem and make it cross-platform compatible by making your path relative to the current document. You do this by not adding a forward slash to the path in the href. So if you are at:

 

http://localhost/some_folder

 

And you have the css path:

 

some_path/style.css

 

The actual path to the CSS file will be:

 

http://localhost/some_folder/some_path/style.css

 

This will work on both systems, but as you discovered, if you are in a subfolder, for example:

 

http://localhost/some_folder/sub_folder

 

and you use the same path as above (some_path/style.css), as you discovered it doesn't work, because the relative path is telling the system that the file is located at the following URL:

 

http://localhost/some_folder/sub_folder/some_path/style.css

 

which of course is a different path than when you are in the root folder.

 

You can also use absolute paths without the domain name, by using a forward slash at the start of your path:

 

/some_path/style.css

 

This will look for the file in the same location on every page, regardless of whether or not you are in a subfolder, as it's relative to the root:

http://localhost/some_path/style.css

http://my-site.com/some_path/style.css

 

But now the problem is on localhost, because the file isn't located at /some_path/style.css, it's located at /some_folder/some_path/style.css, so it's not going to work.

 

You have two options:

 

1) Use <base> like marplo said. This is the easiest solution. However, I personally don't like it because it adds markup to the site that is only useful to me as the developer, and not to the users.

2) Create a subdomain on your localhost, and use absolute paths. This is my preferred method, because it adds no extra markup, however it does take a bunch of extra configuration. If I was working on a site named my-site.com, I would create the subdomain http://my-site.dev on my localhost, so that I could access it in my browser just liked I typed it there. Then I use absolute paths for all CSS, and since both my local domain and the sub domain are both at the webroot, the problem goes away. For example, if I used the path:

 

/some_path/style.css

 

Then the paths to the css file, regardless of where it was accessed from on each domain, are located at the following URLs:

http://my-site.dev/some_path/style.css

http://my-site.com/some_path/style.css