Thomas Thomas - 2 months ago 11
CSS Question

CSS style sheets wont link

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

Answer

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.

Comments