Link to home
Start Free TrialLog in
Avatar of billy21
billy21

asked on

CSS File not Working

I have a JSP servlet that builds an HTML page that is linked to a CSS file.

For some reason the css file is not being picked up when the page is built.

The HTML produced by the servlet is as follows:

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='PropertyMain/Main.css'>
<title>Property Details</title>
</head>
<body>
<h1>Property Details</h1>
<form>
<table align='center'><tr><td align='center'>
<table><tr><td valign="top">
<table><tr>
<td width='100px'>Location:</td><td width='100px'><select class='dataEntry'><option value='Australia'>Australia</option></select></td></tr>
<tr><td>Sub-Location:</td><td><select width='100px'><option value='Queensland'>Queensland</option></select></td></tr>
</td>
</tr></table>
<td valign="top">
<table><tr>
<td>Username:</td><td><input type='text' name='txtUsername'></td></tr>
</tr></table>
</td>
<td valign="top">
<table><tr>
<td>Username:</td><td><input type='text' name='txtUsername'></td></tr>
</tr></table>
</td></tr></table>
</td></tr></table>
</form>
</body>
</html>

Open in new window


The CSS file (Main.css) looks like this:

/* 
    Document   : Main
    Created on : 29-Mar-2013, 18:32:01
    Author     : Win764
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

input {
    width: 900px; background-color: blue;
}

body {
  background: #eeeeee;
  font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

Open in new window


The css file is in the same folder (PropertyMain) as the servlet class.

PropertyMain is a folder one level above the root directory.

Any ideas?
SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of billy21
billy21

ASKER

Thanks DB and CD for the tips.  I've followed through with these and have further checked the css by injecting it directly in the page via a style tag.  It works, but I still can't get the page to pick up an external css link.

This is a JSP page and the servlet url is http://localhost:8080/MyApp/PropertyMain

Myapp is the root directory, it is where it looks for files when I put no other path information.

The css file is under the PropertyMain folder.  It should be able to pick it up with the path PropertyMain/Main.css or /PropertyMain/Main.css or ./PropertyMain/Main.css.  I can't see any reason for it not being able to find it.

<!DOCTYPE html>
<html>
<head>
<Style>root {display: block;} select{width: 120px;} input {width: 120px; background-color: blue;} body {background: #eeeeee; font-family: "Trebuchet MS", Verdana, Arial, serif; } Table {background-color: red; margin-left:auto; margin-right:auto;}td {Vertical-align: top;}</Style>
<title>Property Details</title>
</head>
<body>
<h1>Property Details</h1>
<form>
<table><tr><td>
<table><tr><td>
<table>
<tr><td>Location:</td><td><select class='dataEntry'><option value='Australia'>Australia</option></select></td></tr>
<tr><td>Sub-Location:</td><td><select><option value='Queensland'>Queensland</option></select></td></tr>
<tr><td>Location:</td><td><select class='dataEntry'><option value='Australia'>Australia</option></select></td></tr>
<tr><td>Sub-Location:</td><td><select><option value='Queensland'>Queensland</option></select></td></tr>
<tr><td>Location:</td><td><select class='dataEntry'><option value='Australia'>Australia</option></select></td></tr>
<tr><td>Sub-Location:</td><td><select><option value='Queensland'>Queensland</option></select></td></tr>
</table>
<td>
<table>
<tr><td>Username:</td><td><input type='text' name='txtUsername'></td></tr>
</table>
</td>
<td>
<table>
<tr><td>Username:</td><td><input type='text' name='txtUsername'></td></tr>
</table>
</td></tr></table>
</td></tr></table>
</form>
</body>
</html>

Open in new window

You might need to set the full literal path because you are serving the page from port 8080 instead of the default port 80.

 http://localhost:8080/PropertyMain/Main.css

If that does not do it,  check your spelling (CASE SENSITIVE)

Cd&
Avatar of billy21

ASKER

I haven't been able to get to the bottom of this.  The fact that the system can't pick up the css file will have something to do with the glassfish web server configuration.  

I'm going to settle for putting the css details into the page itself as a temporary solution.

Having said that, response from both experts was helpful in terms of getting the css and html content right, so I am awarding the points.  Because the question wasn't actually answered I won't add it to the knowledge base.