Cannot get CSS sheets to be recognized

[chuckee]

Hi,
I needed to copy my website to another domain for the purposes of playing around with the various colors in one of the stylesheets (because I cannot alter the stylesheets on my main server).
I copied the mainpage of the website at example.co.nz to the following URL example.com/path/SiteName.htm

The problem is, none of the CSS stylesheets seem to do anything to the formatting on the coped page. In other words, the coped page looks like a bunch of text and images, and looks nothing like the original site.

Does anyone know why?

Edit: I know this post has domain names mentioned in it, but how can I possibly ask this question without putting them there? The question relies on having the other components of the site (e.g. images, javascript files).

Thanks

[edited by: swa66 at 6:17 am (utc) on Sep. 10, 2009]
[edit reason] use example.com :) [/edit]

[D_Blackwell]

I copied the mainpage of the website at example.co.nz to the following URL example.com/path/SiteName.htm
..................
The problem is, none of the CSS stylesheets seem to do anything to the formatting on the coped page.

If the styles are not showing, the file path to the CSS file is likely incorrect. It should be no more than taking another look at where the typ0 is at.

[rocknbil]

To reiterate the reply above,

I copied the mainpage of the website at example.co.nz to the following URL example.com/path/SiteName.htm

So you probably have:

index.html
style.css
path <-- this is a directory
path/SiteName.htm

in index.html you probably have

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

If this is what you copied, it's now inside the path folder. There is no style.css in the path folder. So you need to change the above to this:

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

The leading / means "start at domain root and follow this path to style.css." Using this method will allow your CSS to be portable to any directory.

Another example:

index.html
css <-- CSS directory
css/style.css
path <-- this is a directory
path/SiteName.htm

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

For both index.html and SiteName.htm, the above would find the CSS.

One more complication. If your CSS has any background url's,

div { background: #ffffff url(images/bg.gif) top left no-repeat; }

CSS works relative to the CSS file, not the document (Javascript paths are the opposite.) So if you follow the same style here, no matter where the style sheet is or the document is, it will still "find" the images directory.

div { background: #ffffff url(/images/bg.gif) top left no-repeat; }

Always start at domain root with your paths, avoiding confusing things like

<img src="../../../../where-am-i.gif">