Hello Salesforcians,
I have a problem that I can not display styles in visualforce page. I have created the css files in the static resources. Also, I have created visualforce page that references these styles. You can access the current force.com site at http://impacttest.force.com/Test . Resources are not displayed and images also!
Here's the code that I used to view this page
<apex:page controller="ContractRenewalFormController">
<!-- Begin Default Content REMOVE THIS -->
<head>
<title>
Contract Renewal | ImPACT-Testing & Computerized Neurocognitive Assessment Tools
</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="language" content="en"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<!-- style sheets -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600' rel='stylesheet' type='text/css'/>
<apex:stylesheet value="{$Resource.reset}"/>
<apex:stylesheet value="{$Resource.default}"/>
<apex:stylesheet value="{$Resource.medium}"/>
<apex:stylesheet value="{$Resource.small}"/>
<apex:stylesheet value="{$Resource.defaultoverride}"/>
<apex:stylesheet value="{$Resource.print}"/>
<!--<link href="../css/reset.css?v=0" rel="stylesheet" media="screen, projection, print" />
<link href="../css/default.css?v=2" rel="stylesheet" media="screen, projection" />
<link href="../css/medium.css?v=0" rel="stylesheet" media="screen and (max-width : 960px)" />
<link href="../css/small.css?v=0" rel="stylesheet" media="screen and (max-width: 640px)" />
<link href="../css/default-override.css?v=0" rel="stylesheet" media="screen, projection" />
<link href="../css/print.css?v=0" rel="stylesheet" media="print" />-->
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">$.noConflict()</script>
<!-- analytics -->
<script>
function clearText(mesg,id){
var r=document.regform;
if (r.elements[id].value == mesg) r.elements[id].value = '';
r.elements[id].style.color="#000";
}
function checkText(mesg,id){
var r=document.regform;
curText = r.elements[id].value;
curText = curText.replace(" ","");
if(curText == "") r.elements[id].value = mesg;
r.elements[id].style.color="#000";
}
function checkdets(){
var r=document.regform;
if(r.name.value=="" || r.name.value=="Account Name"){
alert("Please enter account name");
r.name.value==""
r.name.focus();
return false;
}
if(r.ReferenceID.value=="" || r.ReferenceID.value=="Reference Number"){
alert("Please enter reference number");
r.ReferenceID.value==""
r.ReferenceID.focus();
return false;
}
}
</script>
<!--[if lte IE 8]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- analytics -->
</head>
<body class="pay">
<div class="skipnav"><a href="">Jump to main content</a></div>
<div class="pagewrap">
<div class="mastheadWrap">
<div class="masthead">
<h1><a href="https://www.impacttest.com">ImPACT Test</a></h1>
<h1><a href="https://www.impacttest.com" class="mobileonly"><img src="../imgs/impact-test-mobile.png" alt="ImPACT Test" /></a></h1>
<nav class="topNav">
<a href="https://www.impacttest.com/find_care_provider/" class="provider2_nav">Find a Care Provider</a>
<a href="https://www.impacttestonline.com/customercenter/" class="client_nav">Customer Center</a>
</nav><!-- /topNav -->
<nav class="mainNav">
<a href="https://www.impacttest.com" class="home_nav">Home</a>
<a href="https://www.impacttest.com/about/" class="about_nav">About</a>
<a href="https://www.impacttest.com/products/" class="products_nav">Products</a>
<a href="https://www.impacttest.com/research/" class="research_nav">Research</a>
<a href="https://www.impacttest.com/training/" class="training_nav">Training</a>
<a href="https://www.impacttest.com/support/" class="support_nav">Support</a>
<a href="https://www.impacttest.com/purchase/" class="purchase_nav">Purchase</a>
<a href="https://www.impacttest.com/news/" class="news_nav">News</a>
<a href="" class="search_nav" id="searchBtn">Search</a>
</nav><!-- /mainNav -->
<div class="mobileNavTrigger mobileonly">
<a href="#"><img src="../imgs/btn-mobilenav.png"/></a>
</div><!-- /mobileNavTrigger -->
</div><!--/masthead-->
</div><!-- /mastheadWrap -->
<div class="contentwrap group" id="content">
<h1>Contract Renewal</h1>
<div class="maincontent ">
<div class="errors" style="color:red;"></div>
<div id="purchase-form">
<apex:form >
<apex:pageMessages />
<h5>Account Information</h5>
<hr />
<table cellpadding="8" cellspacing="0" border="0" id="regformTable">
<tr>
<td>Account Name </td>
<td nowrap="nowrap"><div style="padding-left:10px;"></div>
<input name="name" id="name" type="text" class="metal" size="20" style="color:#666;"
value="Account Name"
onfocus="clearText('Account Name','name')"
onblur="checkText('Account Name','name')"
/>
</td>
</tr>
<!--<tr><td nowrap="nowrap"> </td><td></td></tr>-->
<tr>
<td>Reference Number </td>
<td nowrap="nowrap"><div style="padding-left:10px;"></div>
<input name="ReferenceID" id="ReferenceID" type="text" class="metal" size="20" style="color:#666;"
value="Reference Number"
onfocus="clearText('Reference Number','ReferenceID')"
onblur="checkText('Reference Number','ReferenceID')"
/>
</td>
</tr>
<tr><td nowrap="nowrap"> </td><td></td></tr>
<!--<tr><td nowrap="nowrap"> </td><td></td></tr>-->
<tr>
<!--<td><input name="submitConfirm" type="submit" value="Confirm" id="submitConfirm" class="button-styled" /></td> -->
<!-- <td><input name="submitCancel" type="submit" value="Cancel" id="submitCancel" class="button-styled" /></td> -->
<td><apex:commandButton action="{!confirm}" value="Confirm" id="confirmButton" styleClass="button-styled"/></td>
<td><apex:commandButton action="{!cancel}" value="Cancel" id="cancelButton" styleClass="button-styled"/></td>
</tr>
</table>
</apex:form>
</div>
</div>
</div>
<div class="footerWrap">
<div class="footer">
<div class="section group">
<nav class="inTouch">
<a href="https://www.facebook.com/pages/ImPACT-Test-Concussion-Management-Program-for-Athletes/172173736183751" class="social facebook"><img src="../imgs/ico-facebook.png" alt="Like us on Facebook" /></a><a href="https://www.youtube.com/user/ImPACTTest" class="social youtube"><img src="../imgs/ico-youtube.png" alt="Subscribe on YouTube" /></a>
<a href="https://www.impacttest.com/contact/" class="mail">
<img src="../imgs/ico-mail.png" alt="" />
Contact Us
</a>
<a href="" class="phone">
<img src="../imgs/ico-message.png" alt="" />
1.877.646.7991
</a>
<a href="#" class="newsletter" onclick="popUp=window.open('https://confirmsubscription.com/h/t/9279885E317A82C6', 'popupwindow', 'scrollbars=yes,width=600,height=400');popUp.focus();return false">
<img src="../imgs/ico-pencil.png" alt="" />
Sign up for our newsletter
</a>
</nav><!-- /inTouch -->
<nav class="terms">
<a href="https://www.impacttest.com/legal/?Privacy-Policy-1">Privacy Policy</a>
<a href="https://www.impacttest.com/legal/?Terms-and-Conditions-2">Terms and Conditions</a>
<span class="copyright">ImPACT Applications, Inc. © 2014</span>
</nav><!-- /terms -->
</div><!-- /section -->
</div><!--/footer-->
</div><!-- /footerWrap -->
</div>
</body>
<!-- End Default Content REMOVE THIS -->
</apex:page>
Using Inspector i see that you are referencing one http url for a png and thats failing .Also there is a javascript issue .One more thing is to see following
1)Does your static resource files made Public ? 2)Also if you are using your own Head tag and body prefer using attribute applyhtml=false on apex:page tag