Server side include breaks layout

Question

I have finally perfected my web page and it works perfectly in every browser.

However, when I abstracted out the header and footer contents into server side includes, the layout changes marginally in Firefox/Opera/Safari, but in IE, the layout changes makes the page look broken.

Are there any known issues that could cause the layout to change when using SSIs? Quite frankly, I'm surprised that using a SSI would have an effect like this. I am using HTML5 tags, the modernizr js library, and the page validates if any of that matters.

EDIT: I fixed my problem by changing what code was abstracted (I simply abstracted one parent tag further than before). HOWEVER, I am still eager to know exactly why this bug happened in the first place. Is there someone out there who could shed light on what in particular could cause this?

It shouldn't change anything since the includes are processed 'server side' and all that's returned to the browser is the HTML. The most likely candidate for the problem is in the abstraction. Perhaps you're missing a closing tag or something else? It's the most likely answer I think. — Jamie Dixon, Jan 03 '11 at 20:57
As Jamie says, SSIs should have no effect. The client should have no idea that a webpage was formed from lego rather than as one big brick. You probably made a mistake somewhere. — Lightness Races in Orbit, Jan 03 '11 at 21:11

score 1 · Answer 1 · answered Jan 03 '11 at 20:57

1

Chances are that its not SSI that's causing any issues.

It's entirely possible that there are newlines in the HTML code causing IE to insert extraneous spaces, causing the layout to break.

Also, be sure you separated the code correctly when you moved pieces to the includes. It is probably easiest to check this by running your HTML through a validator.

answered Jan 03 '11 at 20:57

simshaun

21,263
1
57
73

The code was separated just fine. I did not add or change anything outside of cutting and pasting the html code into its appropriate SSI. So if I didn't add anything where is the extra space coming from? – Moses Jan 03 '11 at 21:05
capdragon covered what I was talking about when I said IE may add extraneous spaces. IE in particular is finicky about adding an extra space in at the end of tags that are separated across multiple lines in the source. That is most likely your issue. – simshaun Jan 03 '11 at 21:08

score 0 · Answer 2 · edited May 23 '17 at 12:06

It may be a file encoding problem with UTF-8, inserting BOM characters at the beginning of the included file. My solution was to save the include file as UTF-8 without the BOM signature.

I noticed having the include statement just after the body tag showed the extra space, but adding (any?) html tag around the include statement hides it. I'm guessing the browser ignores the characters once they're "inside" the body instead of the beginning.

My particular situation involved Visual Studio, but it shows up with a mix of editors. See also

score 0 · Answer 3 · answered Jan 03 '11 at 21:02

0

I was having a similar problem and fixed as follows.

i had something like this:

<div>
   <include>
</div>

and fixed it by changing it to this:

<div><include></div>

answered Jan 03 '11 at 21:02

capdragon

14,565
24
107
153

I trimmed the whitespace in the HTML, and again in the SSI, but it didn't solve the problem. – Moses Jan 03 '11 at 21:11

Moses · Accepted Answer · 2011-01-03T22:42:24.427

The issue ending up being a bug with how the server parsed the HTML and with HTML5 tags. For whatever reason, when I added one extra tag set to the SSI, it worked.

My original include looked like this:

<header>
    <!--#Include File="/includes/header.shtm"-->
</header>

with the included file being:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

But when I took all of the HTML5 tags out of the include, as shown below, everything worked as normal. I'm not sure if this is an issue with an old version of apache or what, but doing this fixed everything.

<header>
  <nav>
    <!--#Include File="/includes/header.shtm"-->
  </nav>
</header>

Server side include breaks layout

4 Answers4

Linked