PHP causes unwanted margin at top of body (different lengths on different browsers)

**andygout** · Aug 7, 2012 14:11

Hello,

I created a website template using HTML and CSS so that the design lays flush against the top of the page.

I have since inserted lots of PHP into it (and used some 'includes') and now an unwanted margin has appeared above the body of the web page. This could be easily fixed using a bit of CSS to absorb the margin, i.e.

body {
margin-top: -20px;
}

However, the size of the margin differs depending on the browser you are using:-
Google Chrome, Safari: 20px margin
Firefix, Opera: 26px margin
Internet Explorer: Everything is completely messed up using IE!

I can't figure out what is causing this margin to appear, or how to remedy the problem with a single fix for both sets of browsers (I'm not going to worry about IE for the time being given the whole design has been inexplicably skewed).

Any help gratefully received,

Thanks,

Andy

**StarLion** · Aug 7, 2012 14:41

Have you tried highlighting to make sure it's not throwing a PHP error at you, but your text color is the same as your background so you dont see it?

**CSU-Bill** · Aug 7, 2012 15:38

Does your live page validate? I have often found errors by using the W3C validator. Once you locate an error, you can look at the code to locate the include that may be causing the problem.

**andygout** · Aug 8, 2012 02:01

I've been receiving other PHP error notifications on occasion and they present themselves easily enough.

I'm building it all offline so maybe when it comes to validate the page the solution will present itself.

Thanks both!

**canabatz** · Aug 13, 2012 01:02

try to start your css at most of the time with

body {margin:0; padding:0;......

it will fix alot of unwanted results.

**TomB** · Aug 13, 2012 02:54

View the source of the page, check nothing is being sent to the browser before the <html> tag.

**andygout** · Aug 13, 2012 13:42

Hi canabatz. I use the below piece of CSS for my site which does pretty much the same as the above piece of CSS and has worked fine until I started inserting PHP.

Code:

* {
margin: 0;
padding: 0;
}

Hi TomB - The <html> tag is the first thing that appears in the page source:-

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

In the actual code I'm putting some 'includes' in beforehand (named 'helpers'), but these don't show up on the page source and shouldn't interfere with the actual display of the page. Kevin Yank's book instructed me that I could put these before the <html> tags:

PHP Code:


<?php

function html($text)

{

return htmlspecialchars($text, ENT_QUOTES, 'UTF-8');

}



function htmlout($text)

{

echo html($text);

}

?>

**martbean** · Aug 16, 2012 07:20

It definitely sounds like something is being added to the page output somewhere. As CSU-Bill says it's worth running it through the W3C validator (or using the excellent HTML Validator plugin for Firefox). If you're working offline you can copy and paste into the validator:

http://validator.w3.org/#validate_by_input

Alternatively post the HTML that is outputted by PHP here and we can check it out.

**andygout** · Aug 16, 2012 13:42

Cheers Martin - I'll give the validator a whirl in the first instance but if I'm still wanting I'll be sure to show you the HTML code. Thanks again, Andy.

**JamieFDHurst** · Aug 19, 2012 12:57

Originally Posted by andygout

Hi canabatz. I use the below piece of CSS for my site which does pretty much the same as the above piece of CSS and has worked fine until I started inserting PHP.

Code:

* {
margin: 0;
padding: 0;
}

Hi TomB - The <html> tag is the first thing that appears in the page source:-

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

In the actual code I'm putting some 'includes' in beforehand (named 'helpers'), but these don't show up on the page source and shouldn't interfere with the actual display of the page. Kevin Yank's book instructed me that I could put these before the <html> tags:

PHP Code:


<?php

function html($text)

{

return htmlspecialchars($text, ENT_QUOTES, 'UTF-8');

}



function htmlout($text)

{

echo html($text);

}

?>

One tip is not to use the closing-tag (?>) at the end of your PHP file.

If you accidentally enter a space or newline at the end of the file AFTER this tag, it will be outputted to the browser, which might be causing some strange margin at the top.

Might be worth going through all of your files and removing the closing-tag. I've been avoiding its use for some time now.

**andygout** · Aug 20, 2012 05:41

Thanks Jamie,

I'm guessing that is just the final (?>) at the end of the PHP index file rather than all the individual pieces of PHP inserted into other HTML files?

Andy

**guido2004** · Aug 20, 2012 07:10

Yes, it's the final ?> closing tag at the end of any php file.

Open the resulting html code in your browser, and confront it with the original html code (the one without any php code inserted). You should see something different.
Or use FF and the Firebug extension to see what exactly is causing that unwanted margin. From there you should be able to establish the source of the unwanted element.

**andygout** · Aug 20, 2012 13:09

Hey guys,

I have deduced it may have something to do with the opening DOCTYPE at the top of the HTML code.

Normally I use the below and the margin would appear, but remain empty.

HTML Code:

<?php include_once $_SERVER['DOCUMENT_ROOT'] .
	'/includes/helpers.inc.php'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

But if I position the brackets so as to separate different portions of the DOCTYPE, as below, then the following appears as unformatted text, fitting very snugly in that margin:-

HTML Code:

<"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML Code:

<?php include_once $_SERVER['DOCUMENT_ROOT'] .
	'/includes/helpers.inc.php'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
	<"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

And thinking about it, sometimes PHP error messages appear in the margin (ones that are unanticipated and aren't displayed using the 'echo $error' command), and sometimes exceed the 20px margin if it is a particularly lengthy one explaining several errors, pushing the margin down and making it as large as it needs to be so as to accommodate the message.

Does that give any clues as to how to cancel out the margin?

Thanks guys,

Andy

**andygout** · Feb 9, 2013 09:00

I had to use Notepad++ and use apply this option from the Encoding drop-down menu to the affected files: Convert to UTF-8 without BOM.

http://stackoverflow.com/questions/6...-in-utf-8-file

User Tag List

Thread: PHP causes unwanted margin at top of body (different lengths on different browsers)

Thread Tools

Display