CSS style sheets wont link

Question

Linking my CSS style sheet stopped working all of a sudden?

The CSS file is one folder up. Plus I used the IDE auto fill feature to fill out the href.

Plus this is a practice file from Lynda.com

<cfquery datasource="photogallerydb" name="qPhotographer">
  SELECT * FROM Photographer WHERE featured = 1
</cfquery>
<cfquery datasource="photogallerydb" name="qPhotos">
  SELECT * FROM Photo WHERE photographerid = #qPhotographer.photographerid#
</cfquery>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Our Photo Gallery</title>
  <link rel="stylesheet" type="text/css" href="../styles.css" media="all" />
</head>

<body>

  <div id="main">
    <div id="header">
    </div>
    <div id="navbar" align="center">
      <a href="../home">Home</a>
      <a href="../photographers">Photographers</a>
      <a href="../photos">Photos</a>
    </div>
    <br class="clearfloat" />
    <div id="content">
      <h1>Our Featured Photographer</h1>
      <cfoutput>
        <h2>#qPhotographer.Firstname# #qPhotographer.Lastname#</h2>
      </cfoutput>

      <cfdump var="#qPhotos#">

    </div>
    <div id="footer">
      Copyright &copy;2009 Our Photo Gallery
    </div>
  </div>

</body>

</html>

CSS:

body {
 background-color: #ABBAF1;
 margin:0px;
 padding:0px;
}
body, table {
 font-family:Arial, Helvetica, sans-serif; 
}
h1 {
 font-size:1.2em;
 font-weight:bold;
}
h2 {
 font-size:1.1em;
 font-weight:normal;
}
h3 {
 font-size:.9em;
 font-weight:normal;
}
img {
 border:0px;
}
div {
 margin:0px;
 padding:0px;
 font-size:16px;
}
.clearfloat {
 clear:both;
 height:0px;
}
a {
 color:#000000;
 text-decoration:underline;
}
a.hover {
 text-decoration:underline;
}
#main {
 background-image: url(images/background.jpg);
 width:760px;
 border: 0px;
 height: 1400px;
 margin-top: 20px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;

}
#header {
 background-image: url(images/banner.jpg);
 height: 100px;
 width:inherit;
}
#navbar {
 background-color: #434DD1;
 height:2em;
 width:inherit;
 color: #CCC;
 padding-top: 15px;
}
#navbar a {
 color: #FFF;
 font-size: 18px;
 font-weight:bold;
 text-decoration:none;
 margin-left:15px;
 margin-right:15px;
}
#navbar a.visited {
 color: #FFF;
}
#content {
 padding-left:20px;
 padding-right:40px;
 padding-bottom:20px;
 padding-top:10px;
 min-height:300px;
}
#footer {
 padding-left:20px;
 padding-right:20px;
 font-size:12px;
 font-style:italic;
}
.oddrow {
 background-color:#fff;
}
.evenrow {
 background-color:#00ffff;
}

Firefox Debugger:

Status report</p><p><b>message</b> <u>/photogallery/styles.css</u>  </p><p><b>description</b> <u>The requested resource is not available.</u></p><hr class="line"><h3>Apache Tomcat/8.0.27</h3></body></htm

Location of files:

URL: http://localhost:8500/photogallery/home/index.cfm

HTML: C:\ColdFusion2016\cfusion\wwwroot\Photogallery\home\index.cfm

CSS: C:\ColdFusion2016\cfusion\wwwroot\Photogallery\styles.css

I just tried using absolute reference: I don't get an error in Firefox anymore. But no style shows up. — Thomas, Sep 30 '16 at 00:22
URL: http://localhost:8500/photo%20gallery/home/index.cfm HTML:C:\ColdFusion2016\cfusion\wwwroot\Photo Gallery\home\index.cfm CSS:C:\ColdFusion2016\cfusion\wwwroot\Photo Gallery\styles.css — Thomas, Sep 30 '16 at 00:33
Try accessing the css directly: localhost:8500/photo%20gallery/styles.css — someone, Sep 30 '16 at 00:40
If the web server is running `index.html` from the root, then you can't ask it for something one level up. What is the URL for `index.html`? — , Sep 30 '16 at 02:55
@torazaburo index.html is 1 level deep. in the home folders. CSS folder is one level up — Thomas, Sep 30 '16 at 03:53
When I run CSS file directly I get Apache Tomcat error "The requested resource is not available." — Thomas, Sep 30 '16 at 03:57
This is odd, because your error message from the server talks about `photogallery` with a lower-case `p`, yet your paths indicate `Photogallery` with an upper-case `p`. Which is it? You may have an issue with the way Windows distinguishes between upper case and lower case in paths, and/or how the server deals with them. I personally would recommend against using upper-case letters in paths in Windows, or spaces for that matter. When you specify the URL for the home page, are you using the lower-case or upper-case version? — , Sep 30 '16 at 03:57
@torazaburo That was the problem! Thank you sir. But why did CSS file not work. Shouldn't the browser not be able to find the HTML page at all? — Thomas, Sep 30 '16 at 04:01
See http://stackoverflow.com/questions/507156/can-i-make-an-apache-running-on-windows-case-sensitive. — , Sep 30 '16 at 04:01

score 2 · Accepted Answer · edited May 23 '17 at 12:06

Your error message from the server talks about photogallery with a lower-case p, yet your paths indicate Photogallery with an upper-case P. Which is it? You may have an issue with the way Windows distinguishes between upper case and lower case in paths, and/or how the server deals with them. I personally would recommend against using upper-case letters in paths in Windows, or spaces for that matter. When you specify the URL for the home page, are you using the lower-case or upper-case version?

For more information on this problem, see this answer.

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

Your h3 doesn't have a closing } maybe that's causing the css not to display correctly. Also try to remove the space from your path and folder: photo%20gallery

See for related issues this post: HTML: href syntax : is it okay to have space in file name

edited May 23 '17 at 12:00

Community

1
1

answered Sep 30 '16 at 01:28

Wim Mertens

1,780
3
20
31

That may be a problem, but the error message clearly indicates that `styles.css` could not be found. And there is nothing wrong with spaces in a directory name. – Sep 30 '16 at 02:56
Took the space out of the directory name and still no joy. – Thomas Sep 30 '16 at 03:57

CSS style sheets wont link

2 Answers2