[SalesForce] Visualforce renderas pdf, the css style is not applied

I have a visualforce page renderAs="pdf" in which I'd like to put a footer :

<apex:page standardController="Opportunity" showHeader="false" sidebar="false" renderAs="pdf">
<head>
    <style type="text/css" media="all">
        @page {
            @bottom-center {
             content: element(footer);
            }
        }

        div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
        }

    </style>
</head>
<body>
<!--some html here-->

<div class="footer">
    <div>footer</div>
</div>
</body>

But the css style is not applied : the footer stay just at the end of the other elements, not at the end of the document. In addition if I try to add some css to another element, for example :

.myClass{ color: red; }

this is not applied too.

How can I add css style into my pdf ?

Best Answer

You need to increase your specificity because you are conflicting with the standard stylesheets. Or the simpler solution is just to remove them.

<apex:page standardStylesheets="false" ...>
    <!-- markup -->
</apex:page>
Related Topic