Unexpected quote marks disrupting layout in PHP web page

Question

I'm working on a website here

I'm using an index.php and 'includes' to pull in the various pages of the website. The issue I'm seeing is, when the home page loads, there are two quote marks after which are pushing the main content down. The odd thing is, they disappear and things return to normal when you click on any other page (even the 'Home' link).

Here you can see the quote marks within the markup using Chrome's Inspect Element tool:

This is the code from the index.php:

<?php include('header.php') ?>
<div id="acontainer">
  <?php include('homepage.php') ?>
</div>
<?php include('footer.php') ?>

This is the code for the menu, which loads a different PHP file into the #acontainer:

<ul>
      <li><a class="menui" href="#" onclick="$('#acontainer').load('homepage.php');return false;"><span>Home</span></a></li>
      <li><a class="menui" href="#" onclick="$('#acontainer').load('tuition.php');return false;"><span>Tuition</span></a></li>
      <li><a class="menui" href="#" onclick="$('#acontainer').load('about.php');return false;"><span>About Me</span></a></li>
      <li><a class="menui" href="#" onclick="$('#acontainer').load('contact.php');return false;"><span>Contact Me</span></a></li>
      <li><a class="menui" href="#" onclick="$('#acontainer').load('faq.php');return false;"><span>FAQ</span></a></li>
    </ul>

This is the code from homepage.php:

<script type="text/javascript">

$(function(){
    $('#slideshow').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 12000,
        pager:  '#slider_nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
});

</script>

<div class="header_blog">
    <div id="slider">
      <!-- start slideshow -->
      <div id="slideshow">
        <div class="slider-item"><a href="#" onClick="$('#acontainer').load('tuition.php');return false;"><img src="images/simple_img_1.jpg" alt="icon" width="917" height="398" border="0" /></a></div>
        <div class="slider-item"><a href="#" onClick="$('#acontainer').load('about.php');return false;"><img src="images/simple_img_2.jpg" alt="icon" width="917" height="398" border="0" /></a></div>
        <div class="slider-item"><a href="#" onClick="$('#acontainer').load('tuition.php');return false;"><img src="images/simple_img_3.jpg" alt="icon" width="917" height="398" border="0" /></a></div>
        <div class="slider-item"><a href="#" onClick="$('#acontainer').load('contact.php');return false;"><img src="images/simple_img_4.jpg" alt="icon" width="917" height="398" border="0" /></a></div>
      </div>
      <div class="clr"></div>
      <!-- end #slideshow -->
      <div class="controls-center">
        <div id="slider_controls">
          <ul id="slider_nav">
            <li><a href=""></a></li>
            <!-- Slide 1 -->
            <li><a href=""></a></li>
            <!-- Slide 2 -->
            <li><a href="#"></a></li>
            <!-- Slide 3 -->
            <li><a href="#"></a></li>
            <!-- Slide 4 -->
          </ul>
        </div>
        <div class="clr"></div>
      </div>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
    <div class="FBG">
      <div id="quote">
        <p>
        Welcome to <strong>Creative Tuition</strong>, home of personal guitar tuition for musicians of all ages and abilities around the North West of England. Book a free lesson today!
        </p>
      </div>
      <div class="clr"></div>
    </div>

    <div class="FBG" style="border-bottom : none;">   

        <div id="reasons-list">

            <h3 class="level">3 Reasons to Give Creative Tuition a Try</h3>
            <br />
            <ul id="reasons">
                <li>Your first lesson is FREE and includes a complete breakdown of where you are and where you want to be</li>
                <li>5 years of professional teaching experience and Grade 8: Rock Guitar Playing & Theory</li>
                <li>Creative and custom lesson plans completely tailorered for YOU</li>
            </ul>

            <p>Not enough? Find out more at our <a href="#" onClick="$('#acontainer').load('tuition.php');return false;">Tuition Page</a>.</p>
            <div class="clr"></div>.</p>

        </div>

        <div id='mediaspace'>This text will be replaced</div>

        <div id="reasons-video">
            <script type='text/javascript'>
              jwplayer('mediaspace').setup({
                'flashplayer': 'js/player.swf',
                'author': 'Creative Guitar Tuition',
                'file': 'http://www.youtube.com/watch?v=RyXTJkLRSEg',
                'controlbar': 'bottom',
                'width': '470',
                'height': '320'
              });
            </script>

        </div>
                <h3 class="level">Is Creative Guitar Tuition right for you?</h3>
                <br />
                <p>The creative and flexible lesson plan taught at Creative Guitar Tuition was developed through <span class="blue">5 years of professional teaching experience</span> at many of the UK’s major guitar outlets and institutions. This tried and tested teaching method not only includes the best content you will find but (and this is the key), through careful dissection of your ability and goals, we will work together to create a completely customised lesson plan.  This will ensure your musical progression does not deviate from your desired path to becoming a better musician. This will ensure you arrive at your musical destination in the shortest, most efficient and fun way possible.</p>
        <br />
        <div id="level">
            <div class="fourth">
                <h3>Beginner?</h3>
                <p>Are you just beginning your musical journey? Are you short on spare time and tired of trawling the Internet only to find hit and miss information?</p>
            </div>
            <div class="fourth">
                <h3>Intermediate?</h3>
                <p>Are you at intermediate level but feel that you're progression isn’t moving  as fast and in the direction you’d like?</p>
            </div>
            <div class="fourth">
                <h3>Advanced?</h3>
                <p>Are you an advanced player, but you’ve hit a wall and you're not sure how to push on to the next level?</p>
            </div>
            <div class="fourth">
                <h3>Not sure?</h3>
                <p>No matter what your ability, Creative Guitar Tuition will give you a free lesson so you can see just how much better you could be.</p>
            </div>
            <a class="free-lesson" href="#" onClick="$('#acontainer').load('contact.php');return false;" />
        </div>

    </div>
  </div>
          </div>

Any clue what could be causing this odd behaviour?

Many thanks

Answer 1

I was looking for help with the same problem. What helped me was encoding files as "UTF-8 without BOM" (Notepad++ has that option). If your files are encoded with UTF-8 than this is what most probably is causing the problem. Hope it helps someone who stumbles upon that thread.

Answer 2

What you see as "quotes" is just a display of a single space. The developer tools cannot display a space because the space is empty. To show you the space, the developer tools use quotes.

The solution is to remove spaces and newlines after each final ?> of your included files, or even better, just omit the final ?>. This is allowed by PHP and encouraged by many developer to avoid this exact issue you are experiencing.

Other sources of unwanted spaces are the spaces or newlines between > and <. These aren't not always easy to find or to fix. I a comment I told you to put

<div id="acontainer"><?php include('homepage.php') ?></div>

on a single line. This works here, but in more complicated situations you need space and newlines to increase readability. In this case put the newline before the > or ?> like this (this is allowed HTML and PHP!):

<div id="acontainer"
   ><?php include('homepage.php') 
   ?></div>

But do this only if you really have problems with unwanted space. Most of the time the spaces are benign.