File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Problem getting css style sheet to work Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Problem getting css style sheet to work" Watch "Problem getting css style sheet to work" New topic
Author

Problem getting css style sheet to work

Matt Kohanek
Village Idiot
Ranch Hand

Joined: Apr 04, 2009
Posts: 483

I have a page Im trying to use a style sheet on. The style sheet is saved under /NIRAP/WebContent/test/commons.css

Im using Eclipse btw.

On my page I have



And in that style sheet I have:



So then I try to test if this is working correctly by putting this on my page



However, no stlying is happening at all. This is the first time Ive tried to use a style sheet, so Im not sure where the problem may be here. Anyone know what Im doing wrong here? I have tried many variations for the href in my link tag so Im pretty sure that is not the problem. I also replaced class= with style="font-size: 500px" and that worked just fine


True wisdom is in knowing you know nothing - Socrates
Andrew Monkhouse
author and jackaroo
Marshal Commander

Joined: Mar 28, 2003
Posts: 11423
    
  85

Matt Kohanek wrote:Im using Eclipse btw.
That should have no bearing on your issues, but thanks for mentioning it.

I guess the first step you should take is to see if the browser is able to find your CSS file without a problem. Point your browser to http://localhost/NIRAP/WebContent/test/commons.css (substitute localhost if required) and see if the CSS is displayed in the browser window. If not, then the problem is with your location of the CSS file.

If the CSS is displaying properly, then you might want to check a minimalistic page to see if it works. I tried your style sheet with the following HTML, and confirmed that it worked perfectly.

If only one section of that works (e.g. the DIV shows the larger font-size but the table does not) then it is likely that you have some other style affecting your table data. I would recommend you use Firefox with the Web Developer toolbar. Using that you can see far more information about what style is being applied to each element. At a very high level, I can see that my example code above has:



Since I had such a simplistic example, there is only the one class being shown, and none of the previous elements have anything of interest to show. However I then made a more "interesting" example, where I knew I would be overriding different styles. My HTML now looks like:


And the CSS looks like:


Using the Web Developer, I can see where the various styles came from, and the order they were applied:


And when I look at it in the browser, I do indeed see that the "small" font size is the last one used.

Note that my CSS had the font size for the generic td element defined after the specific class of .skin_line, however the Web Developer tool correctly identified that the td element's generic style would be applied first, then the .skin_line, then the #small.

By the way - I assume at some point you will be moving away from using pixels for font sizes and move to em-quads? One discussion of it's use is at EM vs. Pixel

Likewise, unless you are actually displaying tabular data, the use of tables is not a good idea. But one thing at a time.


The Sun Certified Java Developer Exam with J2SE 5: paper version from Amazon, PDF from Apress, Online reference: Books 24x7 Personal blog
Andrew Monkhouse
author and jackaroo
Marshal Commander

Joined: Mar 28, 2003
Posts: 11423
    
  85

By the way - since your original problem didn't mention a problem with JSF, and indeed by explicitly setting the style in the td element I think you showed that this is not a JSF issue, I am moving this to the HTML forum.
Matt Kohanek
Village Idiot
Ranch Hand

Joined: Apr 04, 2009
Posts: 483

Oh yeah I have been avoiding tables already, but was unaware of the font issue. And the code I posted was all there is, so it is about as minimal as it gets. I was just trying to do a simple test to see if I could make it work before I actually try to implement it.
I was able to open the css file when going to the link, so that doesnt seem to be the issue either.
I do keep getting this in my log:



but if I understand correctly that shouldnt have anything to do with this.

I guess Ill create a new project and try it there, that has fixed some issues for me in the past.

BTW, the test page I created is located in

while the css file is located in


So they are located in two separate files under the WebContent folder. I know my tomcat server has weird issues with things like this in the past, where I would need to manually paste certain files into wtpwebapps/project/lib, but this probably is not the issue if the css file is opening at my local host right?
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Problem getting css style sheet to work