CSS and URLs

[dkilburn]

I am setting up my site using CSS. Each class I teach is in it's own subdirectory. I've got 3 levels of pages, organized into directories as follows:

index.htm
.....CSS subdirectory
.....Graphics subdirectory
.....Research subdirectory
..........index.htm
..........other files
.....Internet subdirectory
..........Section 1 subdirectory
...............index.htm
...............other files
..........Section 2 subdirectory
...............index.htm
...............other files


I want to set up the css file to indicate the background image for the pages. Can I use relative URLs? If so, is the image relative to the CSS page or to the html pages? When I tried using URLs relative to the css file, it rendered ok in netscape but not IE. When I changed them to be relative to the htm files, it worked in IE but not netscape. Finally, I just used the absolute URL and that seems to have solved the problem.

I've run into the same problem trying to include other image urls in the css files.

Any suggestions are appreciated!!

Debby Kilburn

[Hierophant]

For your image urls in your CSS file....

use
/graphics/imagename.gif

Then it is relative from your root directory and will work whether its relative to the CSS file or the HTML file.

[dkilburn]

When I add the following:

BODY
{background-image:url("graphics/background.jpg");}

my background will work in netscape, but not in internet explorer. If I change it to

background-image:url("../graphics/background.jpg");

it works in IE but not netscape. Is there a base tag or something I need to include in the CSS file? This is starting to drive me crazy!

[GodFather]

I know this is a little bit more work, but try putting the full URL in there, that should fix the problem.

[Hierophant]

Actually if you put it in there exactly like I said originally it will work on your webserver. Might not work on your local PC but it will definately work on your server.

[dkilburn]

I appreciate the responses. I made the changes (using /graphics/background.jpg), uploaded to the server, and now the background doesn't show on either browser. Before, when I tried (graphics/background.jpg) it at least showed on Netscape.

I am using the most current versions of both browsers.

The page in question is http://www.jps.net/dkilburn, with the css file at http://www.jps.net/dkilburn/css/homepage.css.
I guess for now, I'll just use absolute URLs. I'm sure it's just a minor thing somewhere.

Thanks for taking the time to make suggestions!

[Hierophant]

When I try to pull up your CSS page by clicking on the link you provided I get a 404 error.

[Bimjo]

Have you tried placing your CSS file in the same directory as your html files? Netscape and IE treat external CSS file relationships differently.

One relates all file calls to the CSS file, while the other relates them to the html file. I don't remember which one does which.

I've always placed the CSS file with the html files and called graphics from graphics/somefile.xxx with good success.

hth

[dkilburn]

Try going to the css directory http://www.jps.net/dkilburn/css/. The file, homepage.css is there. When I click on it from there, however, nothing happens.

The code pertaining to the body for the top-level index page is:

BODY
{
background-color: #FAFAEC; /*off white background*/
/*background-image:url("http://www.jps.net/dkilburn/graphics/background.jpg");*/
background-image:url("/graphics/background.jpg");
background-attachment: fixed;
}

The code in the comment tag is what I currently use that works.

Right now I have a file setup for each level of my site. My goal is to just have one file that deals with all of the pages.

I guess I could place the css file in each directory, but that would defeat the goal of having just one file. I've got it working right now with everything in the css file if I use absolute URLs for the images. I just like using relative URLs whenever possible.

Again, thanks for your comments!