Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: CSS
Relative and Absolute Paths in Style Sheets
By BasicTemplates with External CSS

If you use relative paths in your style sheet, Netscape 4.x will incorrectly interpret the paths as being relative to the HTML document to which the style sheet is linked instead of being relative to the style sheet itself. This will work fine if your style sheet is in the same directory as the HTML page, but if you linked your external style sheet to any HTML documents in a different directory, then none of the relative paths will be correct.

If this concerns you because you have a number of visitors coming to your site who still use the ancient version of Netscape 4.x, then you might want to consider using absolute paths instead. Or for smaller sites that do not have directories, move the location of your style sheet to the same directory as your HTML pages (most likely under the root: http://www.yoursite.com/mainstyle.css.

What do absolute paths look like within the style sheet?
body { background-image: url("http://www.yoursite.com/graphics/back.gif");}

What do relative paths look like within the style sheet?
body { background-image: url("/graphics/back.gif");}

One way to easily remember the difference between absolute and relative paths is to think of absolute as being an absolutely sure way to get to the file if you typed the entire string into your browser address bar.