How to Eliminate Whitespace around Server Side Includes when Pages are UTF-8 Encoded?

Question

I have a site running through IIS 7.5, whose pages are encoded in UTF-8 (note I do not have the following problem if I revert to ASCII). I have a Main.html page which includes a header and footer content. When these files are included via SSI, whitespace is injected into the body and forces my page content down. If I combine the files together, this issue goes away. This question is the same as mine, but the answer does not work for me.

Consider the following 4 pages:

SSI.html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Humble Site</title>
    <!--#include file="SSIIncludes.html" -->
    </head>
<body>
    <form id="Form1" runat="server" onsubmit="return false;">

    <!--#include file="SSIHeader.html" -->

                    <div>Here's my content</div>


<script type="text/javascript">

    //do some work

</script>

<!--#include file="SSIFooter.html" -->

    </form>
</body>
</html>

SSIIncludes.html:

<link rel="stylesheet" type="text/css" href="js/jquery.ui.all.css" />
<script type="text/javascript">
    var debug = false;

    if (debug) {
        document.write('<script type="text/javascript" src="js/thirdparty/jquery/core/jquery-1.6.1.js"><\/script>');
        document.write('<script type="text/javascript" src="js/thirdparty/jquery/core/jquery-ui-1.8.12/ui/jquery-ui.js"><\/script>');
    } else {
        document.write('<script type="text/javascript" src="js/thirdparty/jquery/core/jquery-1.6.1.min.js"><\/script>');
        document.write('<script type="text/javascript" src="js/thirdparty/jquery/core/jquery-ui-1.8.12/ui/minified/jquery-ui.min.js"><\/script>');
    }

</script>

SSIHeader.html:

<div>    
    <div>
        <div>
            Something's in a Header!
        </div>

SSIFooter.html:

<div>
            Have a Footer!
        </div>
    </div>
</div>

<br />
<br />
<br />

When I view the page, I see a large block of whitespace (as rendered in the browser) immediately before my first div text. Exploring the source in-browser reveals:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Humble Site</title>
    </head>
    <body>
    ""
    <link rel="stylesheet" type="text/css" href="js/jquery.ui.all.css">
<script type="text/javascript">
    var debug = false;

    if (debug) {
        document.write('<script type="text/javascript" src="js/thirdparty/jquery/core/jquery-1.6.1.js"><\/script>');
        document.write('<script type="text/javascript" src="js/thirdparty/jquery/core/jquery-ui-1.8.12/ui/jquery-ui.js"><\/script>');
    } else {
        document.write('<script type="text/javascript" src="js/thirdparty/jquery/core/jquery-1.6.1.min.js"><\/script>');
        document.write('<script type="text/javascript" src="js/thirdparty/jquery/core/jquery-ui-1.8.12/ui/minified/jquery-ui.min.js"><\/script>');
    }

</script>
<script type="text/javascript" src="js/thirdparty/jquery/core/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/thirdparty/jquery/core/jquery-ui-1.8.12/ui/minified/jquery-ui.min.js"></script>


    <form id="Form1" runat="server" onsubmit="return false;">
    "

        "
    <div class="OwnerOfAllPlaces">    
    <div id="OuterPlace" class="OuterPlace">
        <div>
            Something's in a Header!
        </div>

                    <div>Here's my content</div>


<script type="text/javascript">

    //do some work

</script>
"
        "
        <div>
            Have a Footer!
        </div>
    </div>
</div>

<br>
<br>
<br>        

    </form>


</body></html>

How can I rid myself of these "" " " blocks at my include points?

Are the files itself saved as Unicode? Can it be that the whitespace you are seeing is the BOM? Try saving the file as UTF-8 without BOM. — PeeHaa, Aug 25 '11 at 20:52
http://stackoverflow.com/questions/4852390/utf8-makes-an-extra-line-on-my-site — Chris Haas, Aug 25 '11 at 21:01
@Chris Haas, very good. I spent all of my time googling 'UTF' + 'whitespace' variations. I should have searched variations on 'new line' instead--I could have saved myself some trouble. — Christopher, Aug 26 '11 at 01:07

PeeHaa · Accepted Answer · 2011-08-26T01:17:40.763

3

Probably the files are saved as UTF-8 + BOM.

BOM = Byte Order Mark

The BOM basically are just three (not visible) characters which is added at the start of a document. (At least in UTF-8)

You do not want it in your documents.

Some text-editors give you the option to save a file as UTF-8 without BOM.

I use EditPlus for this, but other might also work.

edited Aug 26 '11 at 01:17

answered Aug 25 '11 at 21:18

PeeHaa

71,436
58
190
262

1

Thanks to http://stackoverflow.com/questions/5406172/utf-8-without-bom-in-visual-studio-2010 for answer on how to save without BOM (without "signature") in Visual Studio. – Christopher Aug 26 '11 at 13:34
Apart from EditPlus you can also use Notepad++ – Rumplin Aug 26 '11 at 20:06

How to Eliminate Whitespace around Server Side Includes when Pages are UTF-8 Encoded?

1 Answers1