title: whitespace in php code causing html to move on page
body: <p>My pagination script is server side and requires that the html is written in the php. When you click on the certain buttons the whole line shifts to the right and/or left a character space or two. I've been looking at this for over an hour and about to put a gun in my mouth, going through it character space by character space and I'm pretty certain it has to do with whitespacing. </p>
  
  <p>I'm not expecting anyone here to look through it for the space but I was wondering if someone has dealt with this and could recommend where to look for the whitespace that could be moving my line and/or if there was anything out there that could just remove all white space without affecting the integrity of the code.</p>
  
  <pre><code>    $prevlink = ($page &gt; 1)?'&lt;a href="?page=1" title="First page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;a href="?page='.($page - 1).'"title="Previous page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;':'&lt;span class="disabled"&gt;&lt;button type="button" class="btn btn-default btn-lg disabled"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt; &lt;span class="disabled"&gt;&lt;button type="button" class="btn btn-default btn-lg disabled"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;';
  
  // The "forward" link 
  $nextlink = ($page &lt; $pages) ? '&lt;a href="?page='.($page + 1).'"title="Next page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;a href="?page='.$pages.'"title="Last page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;':'&lt;span class="disabled"&gt;&lt;button type="button" class="btn btn-default btn-lg disabled"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class="disabled"&gt;&lt;button type="button" class="btn btn-default btn-lg disabled"&gt;&lt;span class="glyphicon glyphicon-chevron-right"aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;';
  
   // The "back" link 
  $prevlink = ($page &gt; 1)?'&lt;a href="?page=1" title="First page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;a href="?page='.($page - 1).'"title="Previous page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;':'&lt;span class="disabled"&gt;&lt;button type="button" class="btn btn-default btn-lg disabled"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt; &lt;span class="disabled"&gt;&lt;button type="button" class="btn btn-default btn-lg disabled"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;';
  
  // The "forward" link
  $nextlink = ($page &lt; $pages) ? '&lt;a href="?page='.($page + 1).'"title="Next page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;a href="?page='.$pages.'"title="Last page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;':'&lt;span class="disabled"&gt;&lt;button type="button" class="btn btn-default btn-lg disabled"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class="disabled"&gt;&lt;button type="button" class="btn btn-default btn-lg disabled"&gt;&lt;span class="glyphicon glyphicon-chevron-right"aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;';
  
  // Display the paging information
      echo '&lt;div id="paging"&gt;',$prevlink,'&lt;p&gt;Listing',$page,'of',$pages,'&lt;/p&gt;',$nextlink,'&lt;/div&gt;';
  </code></pre>
  
  <p>Source:</p>
  
  <p>page loaded:</p>
  
  <pre><code>&lt;div id="paging"&gt;&lt;span class="disabled"&gt;&lt;button type="button" class="btn btn-default btn-lg disabled"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt; &lt;span class="disabled"&gt;&lt;button type="button" class="btn btn-default btn-lg disabled"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;&lt;p&gt;Listing1of31&lt;/p&gt;&lt;a href="?page=2"title="Next page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;a href="?page=31"title="Last page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="edit_listing" style="overflow:hidden;"&gt;
  </code></pre>
  
  <p>click once to next page causes the line to shift once to the right. here's the source after click:</p>
  
  <pre><code>&lt;div id="paging"&gt;&lt;a href="?page=1" title="First page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;a href="?page=1"title="Previous page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;p&gt;Listing2of31&lt;/p&gt;&lt;a href="?page=3"title="Next page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;a href="?page=31"title="Last page"&gt;&lt;button type="button" class="btn btn-default btn-lg"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="edit_listing" style="overflow:hidden;"&gt;
  </code></pre>