Link clickable area is above the link text

Author: davew9999Created May 6, 2014Updated Dec 16, 2022

LabelsVerified

wkhtmltopdf Version: 0.12 OS: Windows 7 Enterprise SP1 and Windows Server 2008 R2 Standard SP1

I added an anchor tag to the footer and when the PDF is generated the clickable area is above the link text. The link works fine when viewing the HTML in my browser. I thought it may have been related to using absolute positioning on the anchor but I got the same issue when replicating the design using tables.

Here is the HTML I've been able to replicate it with:

xml

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
        <link href="http://localhost/MTS/Content/Print.css" rel="stylesheet" type="text/css" />
    </head>
    <body>        
        <div id="pdfFooter">
            <div id="pdfFooterLeft">
                Left text
            </div>
            <div id="pdfFooterMiddle">
                <div id="pdfFooterMiddleContent"><a href="http://www.google.com">Google</a></div>
            </div>
            <div id="pdfFooterRight">
                <div id="pdfFooterRightContent">Right text</div>
            </div>
        </div>
    </body>
</html>

And here is the contents of Print.css

css

/* Observation PDF
----------------------------------------------------------*/
.achievementSection {
    width: 426px;
}

/* PDF footer
----------------------------------------------------------*/
#pdfFooter {
    overflow: hidden;
    position: relative;
    top: 10px;
}

#pdfFooterLeft, #pdfFooterMiddle, #pdfFooterRight {
    height: 30px;
    position: relative;
    width: 33.3333%;
    float: left;
}

#pdfFooterMiddleContent, #pdfFooterRightContent {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#pdfFooterMiddle {
    text-align: center;
}

#pdfFooterRight {
    text-align: right;
}

/* Misc
----------------------------------------------------------*/
.removefromPDF { display: none;}

/* Appraisal PDF
----------------------------------------------------------*/
.appraisalObjectivesDisplayNotes {
    height: auto;
}

#selectObjective1, #selectObjective2 {
    display: none;
}

#appraisalIntro {
    padding: 0;
}

Source: wkhtmltopdf/wkhtmltopdf

View original on GitHub View discussion on GitHub