+ Start a Discussion
d.tejdeep@nicomatic.ind.tejdeep@nicomatic.in 

Fixing Header and footer is not working on salesforce.com api version 33.0

<apex:page  renderAs="pdf" action="{!modifyUnitPrice}" contenttype="UTF-8">

    <head>
      <style type="text/arial" media="print">    
           @media print{
                table {page-break-inside:auto}
                tr    { page-break-inside:avoid; page-break-after:auto;page-break-before:auto }
                thead { display:table-header-group }
            }
            @page {
                margin: 75px 16px 75px 16px;Padding-top:30px;
                @PageBreak{
                   page-break:always;
                    page-break-inside:avoid;
                } 

                @top-center {
                    content: element(header);
                }
                @bottom-center {
                    content: element(footer);
                }
            } 
            .tableStyle{
                width: 100%;
                -fs-table-paginate: paginate;
            }
            @media print{          
                thead
                {
                    display:  table-header-group;   
                }
            }
            div.header{   
                padding-top:60px;              
                position: running(header);           
            } 
            div.footer {
                position : running(footer) ;
            }
            .pagenumber:before {                
                content: counter(page);             
            }                       
            .pagecount:before {             
                content: counter(pages);            
            } 
            #tc{           
                border:1px  solid black ;
            } 
            #tt{
                border:none ;
            }   
            .hideTd {
                display: none;
            }
            .fontChange {
                font-size:17px;
                line-hieght:2px;
            }
            .none {border-top:none;}
            .ftd{
                max-width:5%;
                min-wdith:5%;
            }
            .std{
                max-width:15%;
            }
            .ttd{
                max-width :20%;
            }
            .fotd{
                max-width:20%;
            }
            .table{
                border :2px solid black;
                border-collapse:collapse;
            }
            .tbl_main {
                font-size: 12px;
                border-bottom: 1px solid #000;
                border-left: 1px solid #000;
                page-break-inside:avoid;
                table-layout: fixed;
            }
            .tdCustom {
                border-top: 1px solid #000;
                border-right: 1px solid #000;
                text-align: center;
                height : 30pt;
                word-wrap: break-word; 
            }
            .tdCustom1 {
                border-top: 1px solid #000;
                border-right: 1px solid #000;
                text-align: center;
                height : 70pt;
                //width:15%
               // word-wrap: break-word; 
            }
            .rBorder {
                border-right: 1px solid #000;
            }
            .headTable {
                border: 1px solid #000;
                padding: 10px;
            }
            .table1 {
                border: 1px solid #000;
                border-bottom: none;
            }
            .btmBrdr {
                border-bottom: 1px solid #000;
            }
        </style>                 
    </head>
    <div class="header">   
        <div>  
             <table width="100%" height = "100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="50%" align="left"> 
                        <img style="WIDTH:200px; HEIGHT: 50px;padding-left:5px" src='{!URLFOR($Resource.NicomaticLogo)}' title="logo" />
                    </td> 
                    <td width="50%" align="right" style="padding-right:5px">
                        <b>QUOTATION:<apex:outputField value="{!Quote__c.Quote_Number_New__c}"/></b>
                    </td>  
                </tr>
             </table> 
        </div> 
    </div>
    <div class="footer"> 
        <div >
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top:solid; border-color:#EBEBEB;">
                <tr>           
                    <td align="center">
                        <apex:outputText value="Page " style="font-face:verdana;font-size:0.68em;"/>
                        <span class="pagenumber" style="font-face:verdana;font-size:0.68em;"/> 
                        <apex:outputText value="of" style="font-face:verdana;font-size:0.68em;padding-left:2px;padding-right:2px"/> 
                        <span class="pagecount" style="font-face:verdana;font-size:0.68em;"/>
                    </td>
                </tr>         
            </table>
        </div>      
    </div>
</apex:page>
This is code working on previous salesforce.com api version 27.0

but it is not working on salesforce.com api version 33.0 .

I want to use version 33.0 how to fix this header and footer any alternate way there.
Best Answer chosen by d.tejdeep@nicomatic.in
CyberJusCyberJus
Hello, I had this problem recently as well with APi version 31. The fix for me was to not apply the HTML and set the, html, head, and body tags manually. This is what worked for me:
 
<apex:page renderAs="pdf" controller="PackingSlipPDFController" applyHtmlTag="false" showHeader="false">

<html>
	 <head>
		<style>
           @page { 
				@top-center { content: element(header); } 
				@bottom-center { content: element(footer); }
				margin-top:9em; margin-bottom:8em; 
			}		
		</style>
        </head>
	<body>
                <div class="header">Header here</div>
                <div class="footer">Footer here</div>
        </body>
</html>