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?
HTMLCSSJSP

Avatar of undefined
Last Comment
billy21

8/22/2022 - Mon
SOLUTION
Dave Baldwin

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER CERTIFIED SOLUTION
COBOLdinosaur

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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

COBOLdinosaur

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&
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.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23