Output HTML/CSS not appearing as expected in Visualforce PDF
|Knowledge Article Number||000175785|
|Description||CSS is seemingly not applied in a Visualforce PDF, or the output HTML looks wrong. The behaviour is confirmed when comparing this scenario to the same page when rendered as HTML and viewed within a modern browser.|
|Resolution||During PDF generation, Salesforce strictly enforces W3C standards for the HTML 4.0 specification as documented here: http://www.w3.org/TR/REC-html40/. Furthermore, we do not enforce validation of the rendered HTML according to this specification. We recommend viewing the source in a non-PDF version of the page to ensure there is no invalid HTML according to the HTML 4.0 standards.
One common scenario is the contents of a TABLE tag appearing differently between the PDF and HTML versions of a page. Usually, we find that this occurs when one of the direct descendants of TABLE is a non-table element, such as a SPAN or a DIV. Referring to the TABLE entry from the standards documentation cited above (http://www.w3.org/TR/REC-html40/struct/tables.html), we confirm that the allowed descendants can be an optional CAPTION, followed by zero or more COL and COLGROUP elements, followed by an optional THEAD element, an optional TFOOT element, and then one or more TBODY elements.
So by this logic, using standard Visualforce components like apex:outputPanel where the default layout rendered is a SPAN element will produce this problem if that element is a direct descendant of TABLE. As mentioned, we do not validate the HTML, nor is re-factored to meet the specification. Therefore the resolution in this scenario would be to move the markup that generates the SPAN element to a place within the code where it is allowed.