[SOLVED] PHP include breaks layout?

[Humptydank]

Hi folks --

 

Sorry, newbie question, but I'm just not getting this.

 

Here are two pages:

 

http://www.sharklabpoker.com

 

http://www.sharklabpoker.com/includetest.html

 

Everything about them is the same -- same css, same code if you look at the source. The only difference is that the header code in includetest.html is being inserted via a php include statement.

 

Any ideas on why this is breaking the layout? How can two pages with the same css and the same html even display differently to begin with?

 

Any help is very much appreciated.

 

-- Dave

[.josh]

any errant whitespace in the include? I notice a blank line in the source of 2nd page...

[mattal999]

On the include page, this is being inserted just before the <div id="header">:

 

(Theres like a little dot here)        <div id ="header"><img id="logo" src="img/logo.png">

[Philip]

On the included one, there is an extra character before <div id ="header"><img id="logo" src="img/logo.png">

 

[attachment deleted by admin]

[roopurt18]

Well the answer is obvious:  They're not the same.

 

Even looking at the source in two different Google Chrome tabs I can see that one jumps down a line and has an extra character in it.

 

Try using WinMerge to see where the difference is; it's an open source file compare utility.

[Humptydank]

Well you're surely right -- it is inserting a period or something.  Thanks for the catch, I've been staring at this too long.

 

But now I guess the question becomes - why?

 

The php is simply:

 

<!-- Begin Header -->

<?php

include('_includes/header.html');

?>

<!-- Begin Content -->       

 

 

and the file it's including is:

 

<div id ="header"><img id="logo" src="img/logo.png">

</div>

  <div  id="menu">

  <ul>

    <li class="menu_sep"><img src="img/menu_sep.png"></li>

    <li id="home" class="menu_txt"><a class="menu" href="#">Home</a></li>

    <li class="menu_sep"><img src="img/menu_sep.png"></li>

    <li id="about" class="menu_txt"><a class="menu" href="about/index.html">About</a></li>

    <li class="menu_sep"><img src="img/menu_sep.png"></li>

    <li id="classes" class="menu_txt"><a class="menu" href="classes/index.html">Classes</a></li>

    <li class="menu_sep"><img src="img/menu_sep.png"></li>

    <li id="faq" class="menu_txt"><a class="menu" href="faq/index.html">F.A.Q.</a></li>

    <li class="menu_sep"><img src="img/menu_sep.png"></li>

    <li id="affiliates" class="menu_txt"><a class="menu" href="affiliates/index.html">Affiliates</a></li>

    <li class="menu_sep"><img src="img/menu_sep.png"></li>

    <li id="contact" class="menu_txt"><a class="menu" href="contact/index.html">Contact Us</a></li>

    <li class="menu_sep"><img src="img/menu_sep.png"></li>

    </ul>

</div>

 

Which is just a direct cut-and-paste from the original, non-included file.

 

 

[Humptydank]

Okay, I made an additional test and pointed the include to a zero-byte dummy file, and sure enough, it inserts a period on its own.

 

I think it's something on the server-side, unless you guys have a better idea.

 

Again, that's very much for the help.

[PFMaBiSmAd]

It's probably the BOM (Byte Order Mark) characters if your file is saved as a UTF-8 encoded file. Save it as an ANSI file or a UTF-8 without the BOM.

[Humptydank]

Wow PFMaBiSmAd, that was exactly it.  I re-saved my include file as ansi and the problem went away.

 

Thanks so much -- I really, really, really appreciate it!