PHP Include Causes White Space at the Top of the Page

PHP include causes white space at the top of the page

I got it! I must admit, this was a very strange one.

This was my exact problem, and his solution fixed it perfectly.



The problem was because of the include().

When you save a page as UTF-8, a special signature called a byte-order mark (or BOM) is included at the beginning of the file, indicating that it is a UTF-8 file. You can only see BOMs with low level text editors (such as DOS edit). You need to remove this signature from the included file in order to get rid of the white space at the top of the page.

DOS edit

How do I get rid of white spaces at the top of my webpage?

Does core.php (or any of the files it includes) have blank lines after the final ?>?

If so, delete the ?>. It's best to let the final ?> be implied by the end of the file.

Otherwise, just start bisecting your codebase until you can determine what is adding it.

How can I avoid the blank space when using PHP include?

I found this topic here

Someone sais:

I've had this problem before. Make sure you upload your file in ASCII not Binary. Sometimes, with some FTP servers, you have to set this manually. Also try converting your newlines to "\n" in your text editor. Lemme know which editor you're using and I'll give you more specific instructions.

http://forums.digitalpoint.com/showthread.php?t=957679

And someone solved it :
I solve this problem using notepad++ (http://notepad-plus.sourceforge.net/)
Open php files with notepad++ and in Format menu chose encode in utf-8 without BOM and save it.

Hope this helps to

Blank white space on top of the webpage

Using notepad++, make sure that all the files included in this file, as well as itself, are "Encode in UTF-8 without BOM". To do so, follow as below:

In Notpad++ -> (menu) Encoding -> (click) Encode in UTF-8 without BOM

This usually happens if you have used UTF8 characters and saved the file as UTF8. Then, there will be three invisible characters which causes that white space.

PHP include() before doctype, causing a white space

You may be able to fix the problem like this:

<?php
include ("include/session.php");
include ("include/updatestage.php");
?><!DOCTYPE HTML>

But I have observed buggy behaviour in this respect (although not since PHP4), so the easiest solution that guarantees a fix is to put the <!DOCTYPE> before the include - since neither included file outputs anything, and would break your document if it did.

<!DOCTYPE HTML>
<?php

include ("include/session.php");
include ("include/updatestage.php");

?>
<!-- Rest of HTML -->

Or this:

<?php

echo "<!DOCTYPE HTML>\n";

include ("include/session.php");
include ("include/updatestage.php");

?>
<!-- Rest of HTML -->

Remember to make sure that the < in the opening <?php tag is the first character in all files if you go with the second option.

EDIT Having in the first place completely failed to take into account the session/cookies problem that has reared it's ugly head, here is a working solution:

<?php

ob_start();

echo "<!DOCTYPE HTML>\n";

include ("include/session.php");
include ("include/updatestage.php");

ob_end_flush();

?>
<!-- Rest of HTML -->

White space at top of page

Add a css reset to the top of your website style sheet, different browsers render some default margin and padding and perhaps external style sheets do something you are not aware of too, a css reset will just initialize a fresh palette so to speak:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

UPDATE: Use the Universal Selector Instead:
@Frank mentioned that you can use the Universal Selector: * instead of listing all the elements, and this selector looks like it is cross browser compatible in all major browsers:

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

Strange Blank Space at Top of Page – HTML, CSS, and PHP

The H1 on the register page has a default Margin to it. Sometimes, I don't know why, if you give the first element a margin, it applies it to the parent.

By giving the H1 #register_title a top margin of 0, you should fix your problem.

#register_title { margin-top: 0; }

Always remember to use a reset.css implementation or keep in mind that elements are styled by default.

Edit:
I'd like to point out that this was an issue because of all your previous elements were absolutely positioned. You really should not be using absolute positioning the way you are. You should use margin-top, padding-top to move elements down the page. Absolute positioning should only be used when no other avenues of positioning an element are available.

php include html adds white spaces

Then, ends up this is caused by unexpected BOM on the file that are included:
For future reference, I just post the code used to check by PHP plainly.

print_r(array_map('dechex', array_map('ord', str_split(file_get_contents("xxxxxxxxxxxxx.html"))))); 

I would definitely prefer using Notepad++ or other software to save a non-BOM version,
but if still prefer using PHP to remove them, just use:
This removes first 3 characters in the file PERMANENTLY every time you execute it, so run once only.

$filename="xxxxxxx.html";
$filec = file_get_contents($filename);
file_put_contents($filename,substr($filec, 3, strlen($filec)));

Hopes it helps :D
Good luck!

White space on top of my webpage

Your HTML is all messed up. You had your head content in the body tag, and other issues.

<html lang="en">
<head>
<meta charset="utf-8">
<title> WTF Design</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--Styles -->
<link href="http://iwokolasinski.com/wtfq/wp-content/themes/mywtftheme/style.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lobster|Khula&subset=latin,latin-ext,cyrillic" rel="stylesheet" type="text/css">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="alternate" type="application/rss+xml" title="WTF Design » główna Kanał z komentarzami" href="http://iwokolasinski.com/wtfq/?feed=rss2&page_id=5">
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-includes/js/jquery/jquery.js?ver=1.11.1"></script>
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-content/themes/mywtftheme/bootstrap/js/bootstrap.js?ver=4.1.1"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://iwokolasinski.com/wtfq/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://iwokolasinski.com/wtfq/wp-includes/wlwmanifest.xml">
<meta name="generator" content="WordPress 4.1.1">
<link rel="canonical" href="http://iwokolasinski.com/wtfq/">
<link rel="shortlink" href="http://iwokolasinski.com/wtfq/">
</head>
<body>

<div class="container-fluid kol"> <h1>główna</h1>
<h1 style="text-align: center;">Heading 1</h1>
<h2 style="text-align: center;">Heading 2</h2>
<h3 style="text-align: center;">Content</h3>
<p style="text-align: center;">Paragraph</p>


<footer>
<p>footer</p>
</footer>

</div> <!-- /container -->

</body>
</html>


Related Topics



Leave a reply



Submit