+ Start a Discussion
Kevin LanguedocKevin Languedoc 

CSS Styling in Visualforce page not Rendering

I am trying to apply CSS styling rules to a Visualforce page. My ultimate goal is to generate a PDF from the page using the renderAs="pdf" (which is not included here because I am trying to isolate the problem).

I have tried creating an external stylesheet using the the various tutorials on developer.force.com pages without any success. These stylesheets were added to the SFDC via static resources as you can see from the code below. However the styling is not rendered.

I also tried apply inline styling to test and again this is not rendered.

I am testing in the Sandbox PRO in my org using API 33. I tried other API versions but got the same results.

Can anyone provide some clues on how to fix the issue

<apex:page showHeader="false" applyHtmlTag="false">
 <apex:stylesheet value="{!URLFOR($Resource.csstesting, 'qstyles.css')}"/> 


  <style type="text/CSS">
   @page {
 /* Landscape orientation */
 size:landscape;

 /* Put page numbers in the top right corner of each
    page in the pdf document. */
 @bottom-right {
 content: "Page " counter(page) " of " counter(pages);
 }
 
 }
  </style>
  



 <apex:outputPanel layout="block" styleClass="standardBackground"/>
 <apex:outputText style="background-color:#0000FF"><span>Hello</span></apex:outputText>

</apex:page>
Best Answer chosen by Kevin Languedoc
bob_buzzardbob_buzzard
External CSS doesn't really work very well with the PDF renderer. This uses Flying Saucer (https://code.google.com/p/flying-saucer/) which also only supports CSS 2.1.  I've found inline styling usually works pretty well though. 

All Answers

bob_buzzardbob_buzzard
External CSS doesn't really work very well with the PDF renderer. This uses Flying Saucer (https://code.google.com/p/flying-saucer/) which also only supports CSS 2.1.  I've found inline styling usually works pretty well though. 
This was selected as the best answer
Kevin LanguedocKevin Languedoc
Hi Bob_buzzard,

Thanks for the information. Actually after posting this question I created a simple web page and added inline css. Once I had the layout just right I copied and pasted the content into a VF page with just the opening and closing tags and the page rendered perfectly. So I confirm that your advice is sound and helpful.