Search code examples
cssjsffacelets

CSS dont work on browsers, but it does on Eclipse

Im building JSF pages with styesheets. THey seem to work when I use the preview funktion in Eclipse but as soon as I test them on IE8 they dont seem to have any effect.

Im using composite views in order to specify a general layout of the page as seen below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <head>
        <link rel="stylesheet" type="text/css" href="/css/masterTemplateCSS/masterTemplateCSS.css" />


        <title><ui:insert name="title"></ui:insert></title>
    </head>

    <body>

        <div class="left_Sidebar">
            <ui:insert name="leftSidebar">

            </ui:insert>
        </div>  

        <div class="bulk_text">
            <ui:insert name="content">

            </ui:insert>
        </div>

        <div class="foot">
            <ui:insert name="footer">

            </ui:insert>
        </div>      

    </body>
</html>

I then try to test them.

<ui:composition template="/templates/masterTemplate.xhtml">

    <ui:define name="title">Create Screen</ui:define>

    <ui:define name="leftSidebar">
        Left sidebar
    </ui:define>
    <ui:define name="content">

The templates work and I am confident the css path is correct. I also tested the css files with validators and they all check out. But it still doenst seem to work in the actual browser:S

Solution

  • You need to learn how relative URLs work. The relative URL of the CSS file

    <link rel="stylesheet" type="text/css" href="/css/masterTemplateCSS/masterTemplateCSS.css" />

    starts with a leading slash, so it is relative to the domain root and the URL actually points to http://localhost:8080/css/masterTemplateCSS/masterTemplateCSS.css

    This is obviously not going to work if your webapplication is not deployed on context root, but on a sub context path, such as http://localhost:8080/contextname. The CSS file should point to http://localhost:8080/contextname/css/masterTemplateCSS/masterTemplateCSS.css.

    Replace the link by

    <link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/masterTemplateCSS/masterTemplateCSS.css" />

    This way it'll end up as /contextname/css/masterTemplateCSS/masterTemplateCSS.css and thus point the right absolute URL.

    Do not replace it by a disk file system path as you mentioned in a comment. This is not going to work at all when the webpage is ever to be served over the internet. Your future web visitors do certainly not have your CSS file at their own local disk file system.