Remove blank spaces that's not visible in the code

Question

I have a strange blank space in top of one of my divs.

Heres the html:

<!-- ### Bottom content container ### -->
<div class="bottom_content">
    <div class="messages"><!-- include problems.php - down devices -->
        <?php include "problems.php";?>
    </div>
</div>
<!-- ### End bottom content container ### -->

When I examine the output I notice there are two ""after the comment inside the messagesclass. Like this:

<div class="messages"><!-- include problems.php - down devices -->
" "
    <?php include "problems.php";?>
</div>

Heres the messages css:

.messages {
  display:block;
  width: auto;
  padding: 10px;
  padding-top: -10px; /* Added this to try to remove blank space in top of div */
  background: rgb(255, 255, 255); /* The Fallback */
  background: rgba(255, 255, 255, 0.5);
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: #ffffff 1px solid;
}

This creates a blank line in top of the div. How can I remove this? I can't find the these two "" anywhere in the code, nor can I find any blank spaces.

EDIT: Here's the problems.php:

<center><div id="chkerror"></div></center>

This is autofilled with content from a separate php file every 30 seconds using the following jquery:

// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug.  without it, IE will only load the first number and will never refresh
setInterval(function() {
 $('#chkerror').load('chkIncludes.php');
}, 30000); // the "30000" here refers to the time to refresh the div.  it is in milliseconds.
});
// ]]>

And heres the content of chkIncludes.php:

<?php include "chkLoc1.php";?>
<?php include "chkLoc2.php";?>

chkLoc1.php and chkLoc2.php contains :

<?php
  $host  = "10.10.10.1";
  $loc = ("Location 1");
  $output = array();
        exec("ping -n 1 $host 2>&1", $output);
      //you can use  print_r($output)  to view the output result
      if (count($output) > 7) {
        $output = null;
        $status = ("up");
        $formattedstatus = ("<font color='green'><b>$status</b></font>");
        }
        else {
        $output = null;
        $status = ("down");
        $formattedstatus = ("<font color='red'><b>$status</b></font>");
        };
    echo ("<div class='$status'><a href='#18/58.99940/5.62324' class='locLink' title='Click to show'><b>$loc</b> <i>(IP: $host)</i> is $formattedstatus</a></div>");

?>

Is there some linebreak in the `problems.php` ? Perhaps its trying to echo an empty array or something ? Can you show us `problems.php` ? — Pogrindis, Apr 27 '15 at 13:05
Are you saying that two doublequote characters are appearing in the output? If that's the case, it is not CSS doing it, it is your PHP. — JC Ford, Apr 27 '15 at 13:05
Are you using templates? Is this markup on the page or are you loading it from an external file? If you are loading external files, make sure you save it as UTF without BOM as Dola mentioned in the answer below. — tribe84, Apr 27 '15 at 13:12

score 2 · Accepted Answer · answered Apr 27 '15 at 13:07

2

Make sure that problems.php file is encoded without BOM (Byte order mark).

If you're using Notepad++, you can achieve that through: Encoding > Encode in UTF-8 without BOM

answered Apr 27 '15 at 13:07

Dola

1,483
11
16

1

You can read more about BOM in this question: http://stackoverflow.com/questions/2223882/whats-different-between-utf-8-and-utf-8-without-bom If your document is encoded using UTF-8 encoding, then it's recommended to remove the BOM. – Dola Apr 27 '15 at 13:34

Remove blank spaces that's not visible in the code

1 Answers1