unwanted squares in MS Word doc generated from HTML

Question

I'm creating a MS Word document from HTML using the code from this topic. After some adaptions it's working fine for me, except now I'm getting squares at each end of the header and footer see image here. Those squares cannot be manually removed and I don't see what is creating them.

To reproduce, just create a *.doc file, open it with a text editor like notepad++ or VS Code and enter the following code. Open the file with MS Word afterwards.

I hope you guys can help me get rid of those squares!

<html xmlns:v='urn:schemas-microsoft-com:vml' xmlns:o='urn:schemas-microsoft-com:office:office'
    xmlns:w='urn:schemas-microsoft-com:office:word' xmlns:m='http://schemas.microsoft.com/office/2004/12/omml'
    xmlns='http://www.w3.org/TR/REC-html40'>

<head>
    <meta charset='utf-8'/>
    <title></title>
    <style>
        @page {
            mso-page-orientation: portrait;
            margin: 1cm 1cm 1cm 1cm;
        }

        @page Section1 {
            mso-header-margin: 1cm;
            mso-footer-margin: 1cm;
            mso-header: h1;
            mso-footer: f1;
        }

        div.Section1 {
            page: Section1;
        }

        table.hdrftrtbl {
            margin: 0in 0in 0in 900in;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        p.MsoHeadFoot,
        li.MsoHeadFoot,
        div.MsoHeadFoot,
        td.MsoHeadFoot {
            margin: 0;
            margin-bottom:1px;
            tab-stops: center 50% right 100%;
            font-size: 12.0pt;
        }
    </style>
</head>

<body>
    <br/>
    TODO: Actual content goes here

    <div class='Section1'>
        <table class='hdrftrtbl' border='0' cellspacing='0' cellpadding='0'>
            <tr>
                <!-- HEADER-tags -->
                <td class='MsoHeadFoot'>
                    <div style='mso-element:header' id='h1'>
                        <span style='mso-tab-count:2'>
                            <img src='logo.jpg' width="140" height="60">
                        </span>
                    </div>
                </td>
                <!-- end HEADER-tags -->
                <!-- FOOTER-tags -->
                <td class='MsoHeadFoot'>
                    <div style='mso-element:footer' id='f1'>
                        <span style='mso-tab-count:0'>&copy; company name</span>
                        <span style='mso-tab-count:1'>TODO: beginning from page 2</span>
                        <span style='mso-tab-count:1'></span>
                        page
                        <span style='mso-field-code:PAGE'></span>
                        of
                        <span style='mso-field-code:NUMPAGES'></span>
                    </div>
                </td>
                <!-- end FOOTER-tags -->
            </tr>
        </table>
    </div>
    
</body>

</html>

score 0 · Accepted Answer · answered Feb 04 '21 at 16:49

Found it. I had to add another <div> block for each header and footer:

<div style='mso-element:header'>
  <p class='MsoHeader'>
    <span>&nbsp;<o:p></o:p></span>
  </p>
</div>

and accordingly

<div style='mso-element:footer'>
  <p class='MsoFooter'>
    <span>&nbsp;<o:p></o:p></span>
  </p>
</div>

Apparently the <o:p></o:p> tags are responsible for those squares.

unwanted squares in MS Word doc generated from HTML

1 Answers1