[SalesForce] CSS not working properly

I have VF page where I have css in style. The css works when it is a normal page. Issue comes when we change the page to pdf. When I render the page as pdf the css written on VF page is getting displayed as it is (as text). The css is not working. Can any one tell me what is the reason for this issue.
My VF page :

<apex:page controller="SendAndAttachSpecialPriceForm_Controller" sidebar="false" showHeader="false" id="mainpageID" >

<apex:form id="mainformID">
    <style type="text/css">        
        form{
            padding         :   40px;
        }
        .headingStyle{
            padding-left    :   500px; 
            font-size       :   30px;       
            font-weight     :   bold;
        }
        table#tableStyle{
            border          :   1px solid black;
            border-collapse :   collapse;
            width           :   500px;
            font-size       :   16px; 
        }
        tr, td{
            border          :   1px solid black;
            padding-left    :   15px;
        }
        th{
            padding-left    :   15px;
        }
        tr#heading{         
            border-collapse :   collapse;
        }
        div#enduserdivID{
            padding-top     :   90px;
        }
        div#resellerdivID{
            padding-top     :   95px;
        }
    </style>



    <apex:image url="{!URLFOR($Resource.company_Logo)}"/> 
    <apex:outputPanel id="mainOutpanalID">
        <br/>
        <apex:outputText id="headID" value="Special Pricing Authorization" styleclass="headingStyle"></apex:outputText>
        <br/>

        <!-- Table for Enduser Information -->
        <div id="enduserdivID">
            <table id="tableStyle">
                <body>
                    <tr id="heading">
                        <th>Enduser Information:</th>
                        <th></th>
                    </tr>
                    <tr>
                        <th>Company</th>
                        <td>{!accInformation.Name}</td>
                    </tr>
                    <tr>
                        <th>Name</th>
                        <td>{!accInformation.Name}</td>
                    </tr>
                    <tr>
                        <th>Address</th>
                        <td>{!accInformation.BillingCountry}</td>
                    </tr>
                    <tr>
                        <th>City, State Zip</th>
                        <td>{!accInformation.BillingCity}, {!accInformation.BillingState} {!accInformation.BillingStateCode}</td>
                    </tr>
                    <tr>
                        <th>Email</th>
                        <td>{!accInformation.PersonEmail}</td>
                    </tr>
                    <tr>
                        <th>Phone Number</th>
                        <td>{!accInformation.Phone}</td>
                    </tr>
                </body>
            </table>
        </div>

The issue only comes when we render the VF page as pdf.

Best Answer

This is happening because the inline style is not wrapped by the <head> tag. Also, theapex:page tag is missing an important attribute of applyBodyTag which should be set to false otherwise your inline style wont get applied to the contents of the pdf.

Here is the important guideline reg. rendering VF pages as PDF:

If you use inline CSS styles, you must set the API version to 28.0 or greater, set < apex:page applyBodyTag="false" >, and add static, valid < head > and < body > tags to your page.

You might want to go through all the guidelines provided at this link

Hope this helps. Btw, I verified this in a dev org that with valid tags and attributes (as mentioned in the link) the pdf renders without any issues with all the styling as expected.

Related Topic