• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Problem getting css style sheet to work

 
Village Idiot
Posts: 484
jQuery Oracle Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
author and jackaroo
Posts: 12200
280
Mac IntelliJ IDE Firefox Browser Oracle C++ Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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.
 
Andrew Monkhouse
author and jackaroo
Posts: 12200
280
Mac IntelliJ IDE Firefox Browser Oracle C++ Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 484
jQuery Oracle Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?
 
reply
    Bookmark Topic Watch Topic
  • New Topic