function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
krishna chaitanya 35krishna chaitanya 35 

footer is displayed above the content in vf pgae when it is rendered as a pdf

Hi All,
I am developing one visualforce page which render as word pdf ,but the footer is displayed in between header and content.Below is the code i developed:
 <apex:page standardController="Contact" sidebar="false" showHeader="false" renderAs="PDF">
 <head>
        <style type="text/css" media="print">
            span.cls_002 {
                font-size: 12.0px;
                color: rgb(0, 0, 0);
                font-weight: bold;
                font-style: normal;
                text-decoration: none
            }
            
            div.cls_002 {
                font-size: 9.0px;
                color: rgb(0, 0, 0);
                font-weight: bold;
                font-style: normal;
                text-decoration: none
            }
            
            @page {
                <!--size: 32.7cm 25.9cm;  
                margin-top: 20%;  
                margin-bottom:9%;
                margin-right: 7%;
                margin-left: 5%;
                size: A4;-->
                size: 26.7cm 19.9cm;
               margin: 1in .5in 2in .5in;
                @top-center {
                    content: element(header);
                }
                @bottom-center {
                    content: element(footer);
                }
            }
            
            div.content {
                padding: 0 0 30px 0;
            }
            
            div.header {
                font-weight: bold;
                padding: 10px;
                position: running(header);
            }
            
             div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
        }
        .pagenumber:before {
            content: counter(page);
        }
        .pagecount:before {
            content: counter(pages);
        }
        </style>
        <style>
            body {
                font-family: 'Arial Unicode MS';
            }
            
            #index {
                font-family: 'Arial Unicode MS';
            }
            
            <!--@page {
                size: landscape;
            }
            
            --> <!--@page {
                size: 32.7cm 26.5cm;
                margin-top: 0.01cm;
                margin-left: 0.5cm;
                margin-right: 1.0cm;
                margin-bottom: 0.0cm;
            }
            
            -->
        </style>
    </head>

    <apex:form>

        <body id="index">

            <div class="header">
                <div>
                
                <table width="100%">
                        <tr>
                        <!--<td>
                            <apex:image value="{!$Resource.testLogo}" height="100%" width="100%"/>
                     </td>-->
                            <td width="50%" align="left" style="margin-left: -10px;">
                                <b><span style="font-size: 14.5px;margin-left: 0px; ">test-Werke GmbH</span></b>

                            </td>

                        </tr>
                    </table>

                    <table width="100%" border="0">
                        <tr>
                            <td width="15%">
                                <span class="cls_002">test-Werke testr testr 71-163 testr testr</span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002">Ihr Ansprechpartner:</span>
                            </td>
                            <br/>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">{!Contact.account.name}</span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002">{!$User.FirstName}</span>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">{!Contact.FirstName} {!Contact.LastName} </span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002"> {!$User.LastName} </span>
                            </td>

                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">{!contact.account.billingstreet}</span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002"> Customer Service</span>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">{!contact.account.billingpostalcode} {!contact.account.billingcity} </span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002">Phone: {!$User.Phone} </span>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">{!contact.account.billingcountry}</span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002">Fax: {!$User.Fax}</span>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">&nbsp;</span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002"> {!$User.Email}</span>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">&nbsp;</span>
                            </td>
                            <td width="10%" align="right">
                                <span>testr:</span>
                                <apex:outputText value="{0,date,dd'.'MM'.'yyyy}">
                                    <apex:param value="{!today()}" />
                                </apex:outputText>

                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <div class="footer">
                <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div>
         <hr/>
         <div>
                <table width="100%">
                    <tr>
                        <td>
                            <span class="cls_002">test-Werke testr</span>
                        </td>
                        <td>
                            <span class="cls_002">testr</span>
                        </td>
                        <td>
                            <span class="cls_002">testr</span>
                        </td>
                        <td>
                            <span class="cls_002">info@testgroup.com</span>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <span class="cls_002">testr 71-163</span>
                        </td>
                        <td>
                            <span class="cls_002">testr testr</span>
                        </td>
                        <td>
                            <span class="cls_002">testr testr:testr</span>
                        </td>
                        <td>
                            <span class="cls_002">www.testr.com</span>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <span class="cls_002">D-testr testr</span>
                        </td>
                        <td>
                            <span class="cls_002">testr testr</span>
                        </td>
                        <td>
                            <span class="cls_002">testr:testr testr</span>
                        </td>
                        <td>
                            <span class="cls_002">&nbsp;</span>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <span class="cls_002">&nbsp;</span>
                        </td>
                        <td>
                            <span class="cls_002">testr.testr testr</span>
                        </td>
                        <td>
                            <span class="cls_002">&nbsp;</span>
                        </td>
                        <td>
                            <span class="cls_002">&nbsp;</span>
                        </td>

                    </tr>
                </table>
                </div>
                </div>
                <div class="content" style="border-style: double" >
                </div>
                        </body>
    </apex:form>
</apex:page>

sample out put:User-added image
Karthik KKarthik K
Is it working fine if it isn't rendered as "PDF"
krishna chaitanya 35krishna chaitanya 35
Hello Karthik,
No its showing the same view,with render and with out render