Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Problem getting css style sheet to work

 
Matt Kohanek
Village Idiot
Ranch Hand
Posts: 484
Java jQuery Oracle
  • Mark post as helpful
  • send pies
  • 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
 
Andrew Monkhouse
author and jackaroo
Marshal Commander
Pie
Posts: 11879
195
C++ Firefox Browser IntelliJ IDE Java Mac Oracle
  • Mark post as helpful
  • send pies
  • 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
Marshal Commander
Pie
Posts: 11879
195
C++ Firefox Browser IntelliJ IDE Java Mac Oracle
  • Mark post as helpful
  • send pies
  • 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
Ranch Hand
Posts: 484
Java jQuery Oracle
  • Mark post as helpful
  • send pies
  • 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?
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic