-2

enter image description here

Okay, so I have this little issue with PHP creating whitespace at the top of my web site when I use include(), include_once(), require(), or require_once(). I have figured out how to adjust the positioning of the appropriate elements using the CSS -webkit and -moz keywords but I can't figure out how to adjust the positioning in Chrome.

I've included a screenshot of three different browsers (Edge, Firefox, and Chrome).

Here is the CSS for the blue div on the left side of my web site.

#nav_menu {
position: fixed;
height: 100%;
width: 300px;
background-color: #3C7AF3;
opacity: .6;
padding: 50px 0px 0px 0px;
z-index: 2;
-moz-transform: translateY(-2px);

• -moz-transform: translateY(-2px); worked in Firefox...

• I've tried to fix the whitespace by "converting to UTF-8 w/o BOM" in Notepad++ (it didn't work).

• I need there to be a sort of -chrome-transform: translateY(-2px); here but that's not a real code.

• NOTICE: -webkit-transform: translateY(-20px); doesn't work for Chrome

}

If I can get rid of the whitespace caused by PHP's require_once() then everything will be fine...

This is on the first line of the web site (account.php):

<?php require_once('../includes/initialize.php'); ?>

This is initialize.php:

<?php 
defined('DS') ? null : define('DS', DIRECTORY_SEPARATOR);

defined('SITE_ROOT') ? null : 
    define('SITE_ROOT' , 'C:'.DS.'wamp64'.DS.'www'.DS.'my_company');

defined('LIB_PATH') ? null : define('LIB_PATH', SITE_ROOT.DS.'includes');

// 1. load config file first
require_once(LIB_PATH.DS."config.php");

// 2. load basic functions next so that everything after can use them
require_once(LIB_PATH.DS."functions.php");

// 3. load core objects
// require_once(LIB_PATH.DS."obj".DS."session.php");
require_once(LIB_PATH.DS."database.php");
require_once(LIB_PATH.DS."obj".DS."database_object.php");

// 4. load database-related classes
require_once(LIB_PATH.DS."obj".DS."user.php");
require_once(LIB_PATH.DS."obj".DS."item.php");
?>

Every single one of those php require_once()'s calls pure PHP.

Here's the kicker: I can comment out (or even delete) the entire initialize.php and it doesn't fix the whitespace.

Here's the code that require_once() is supposed to leave in the <head> but rather causes the <head> tag to end:

enter image description here

ihodonald
  • 745
  • 1
  • 12
  • 27
  • 2
    It couldn't cause a whitespace unless the included file is messing up your layout, or if PHP is spitting out an error or warning. Please give us more information. – Ultimater Nov 20 '16 at 05:40
  • 3
    Fix your PHP scripts. Any leaking whitespace is only going to cause you more problems later. Any PHP scripts that are purely PHP should not have a closing PHP tag `?>`. – Brad Nov 20 '16 at 05:49
  • There, I added more code. The only way I know how to remove the whitespace is to remove the `require_once('../includes/initialize.php');` – ihodonald Nov 20 '16 at 06:10
  • 1
    So remove the php closing tag `?>` from `initialize.php`. You really don't need it. – Arjan Nov 20 '16 at 06:53
  • That didn't work. Further, I don't recommend leaving PHP tags open. Ever. – ihodonald Nov 20 '16 at 06:59
  • @Brad look at the last picture I included in the question. Where did that come from? – ihodonald Nov 20 '16 at 07:30
  • 1
    @DonaldWayneMooreII Somewhere in your code. Your IDE is probably inserting a bunch of BOMs into your code. https://en.wikipedia.org/wiki/Byte_order_mark – Brad Nov 20 '16 at 07:31
  • 1
    @DonaldWayneMooreII Also, there is absolutely nothing wrong with leaving your PHP tags open in a file that's purely PHP. No sane rational person leaves them open if they know what they're doing. There's a reason it's written into so many style guides... – Brad Nov 20 '16 at 07:33
  • @Brad I've tried SublimeText and Notepad++. What IDE do you recommend? – ihodonald Nov 20 '16 at 07:33
  • 1
    @DonaldWayneMooreII Both of those should be fine, check for the BOM setting. I don't remember where it's at on either... haven't used either in awhile. – Brad Nov 20 '16 at 07:33
  • 1
    @DonaldWayneMooreII Check this out... leaving out closing PHP tag is even built into PSR-2! http://www.php-fig.org/psr/psr-2/#2-2-files – Brad Nov 20 '16 at 07:34
  • @Brad – BOM setting in SublimeText: `"show_encoding": false,` I've never heard of that before so I'll have to look into it. I'm not using an autoloader though... Just a magic `__construct()`. – ihodonald Nov 20 '16 at 07:43
  • 1
    It has nothing to do with autoloaders. It has to do with unicode endianness. – Brad Nov 20 '16 at 07:45
  • @DonaldWayneMooreII They even recommend leaving php tags open at PHP documentation http://php.net/manual/en/language.basic-syntax.phptags.php . Also, My development team had weird problems due to this exact thing, BOM/encoding/whitespace in class-files. – diynevala Nov 20 '16 at 07:50
  • I know what endianness is. It's fixed now. Thank you. – ihodonald Nov 20 '16 at 08:03

2 Answers2

1

Junk characters at the beginning of the file is often a unicode byte-order mark. These characters tell the parser what endianess to use when parsing the file. They're irrelevant in UTF-8, but it's still possible to configure your IDE to insert them. You probably have these in your included files.

If it were just regular whitespace, the usual culprit is PHP closing tags ?> appearing to early or where they don't need to be. For example, if you have a class file that you include and you have ?> with a blank line at the end, you've inadvertently included a blank line into the output of anything that includes this class. It's recommended to never close your PHP tags in files that are purely PHP. Also double check to ensure there is nothing before the opening PHP tag <?php.

Brad
  • 159,648
  • 54
  • 349
  • 530
  • — Sublime Text logs to the console (at the bottom) what encoding you are saving in on each `Save`. All I had to do was go into NotePad++ and Convert to UTF-8. I deleted all the ending tags to my pure .php files and I'm not getting a BOM anymore but all my meta tags are stuck underneath my head tags... I have no clue how that happened. Any suggestions? – ihodonald Nov 26 '16 at 08:07
  • 1
    @DonaldWayneMooreII Post a new question, and include the actual HTML as sent over the wire, vs. what the browser shows you in the DOM browser. – Brad Nov 26 '16 at 08:09
  • – All BOM's have been removed. I had to go back and convert all the underlying files to UTF-8. Thank you very much for your help, sir. -Donald – ihodonald Nov 27 '16 at 04:53
-1

Update: Whitespace is indeed created by BOM. Open file in NotePad++, go to: Encoding -> Convert to UTF-8 and Save file. Make sure you don't select UTF-8 with BOM.

If that doesn't work, try setting top to 0px (it worked for fixed positioning. Otherwise, Chrome is the only (what I would call a third-party) browser that doesn't support -webkit.

#nav_menu {
    position: fixed;
    top: 0px;
    height: 100%;
    width: 300px;
    background-color: #3C7AF3;
    opacity: .6;
    padding: 50px 0px 0px 0px;
    z-index: 2;
}

If that doesn't work, there's a way to fix it with JavaScript:

if (navigator.appVersion.indexOf("Chrome/") != -1) {
var nm = document.getElementById('your_id');
nm.style.top = '-px';
}
ihodonald
  • 745
  • 1
  • 12
  • 27
  • 2
    I'm with @Brad on this one, I bet your problem is not with styles, but rather the `?>` closing tag. Any characters after that are considered text, and those closing tags could be in any of the included files (config, functions, database...) – diynevala Nov 20 '16 at 06:37
  • I went back and checked. It wasn't that. I just posted a screenshot of the code that `require_once()` leaves at the top of the ``. This isn't the first time this has ever happened... Reference: http://stackoverflow.com/questions/14815400/php-adds-extra-whitespace-on-require I tried converting to ANSI and everything. None of it worked. – ihodonald Nov 20 '16 at 06:58
  • 1
    @DonaldWayneMooreII You converted to ANSI? Now you have a real problem. :-( No wonder it's all screwed up in that screenshot. You've converted your UTF-8 BOM to ANSI. You might very well have to get out your hex editor to fix this. Can you roll back to the previous version in your version control? – Brad Nov 20 '16 at 07:36
  • I converted back to UTF-8 using Notepad++. It's alright man, I have it fixed now... I would mark this question as 'answered' but StackOverflow won't let me. :D – ihodonald Nov 20 '16 at 08:00
  • @Brad, the reason I'm not going to accept that answer is because it doesn't solve the problem. Excluding ending PHP tags in class declarations seems like an awful lot of trouble for something that could be fixed so easily with CSS. For example, if you include that file in another file and then just start typing away like nothing happened, it's likely that the interpreter won't recognize anything until you close your PHP tags... It just seems like bad practice. Like you said, the BOM is ignored by the interpreter anyways... – ihodonald Nov 21 '16 at 04:20
  • 1
    @DonaldWayneMooreII You're welcome to accept or not accept any answer you want, but if you think you've fixed your problem with CSS, you're wrong. Try validating your page, and watch it fail. Try using a finicky parser on your page and watch it fail. And if you think not closing PHP tags on a purely PHP file is going to break your includes, you're wrong. If you think that it's bad practice despite being listed in the PHP documentation, PSR standards, and many other style guides, you're wrong. If you care about the quality of your work, I recommend reconsidering your approach to this. – Brad Nov 21 '16 at 04:29