When developing JSF pages with stylesheets, everything seems to be working fine in the Eclipse preview function. However, when I test the pages on IE8, the styles do not seem to have any effect.
I am utilizing composite views to define a general layout for the page as shown 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>
After setting up the templates, I proceed 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">
Even though the templates are functioning properly and I have verified that the css path is accurate, the stylesheets still do not apply when viewing in the actual browser. I have also validated the css files with validators and everything checks out. It's puzzling why it's not working correctly in the browser.