Php include annoying top margin

StackOverflow https://stackoverflow.com/questions/991253

  •  13-09-2019
  •  | 
  •  

Question

I don't know why every time I try to include my header using PHP’s include there's a top margin. I checked it using Firebug and it says there's a 22px offset margin on the top. Is anybody experiencing this problem? I think it's a CSS propiety: top: 22px. But nothing can change it even if I write h1 style="top: 0px; margin-top: 0px;". I think it's a php-CSS mystery that will never be solved.

edit: The only way to get rid of that top margin offset or whatever it is, is to add the follow properties to the H1: top: 0px; position: absolute;

Will those properties generate more problems in the future?

is there a better way to solve this top margin-offset problem?

edit2: I think there's a problem with the encoding. Is there a conflict between the encoding of the included file (header.html) and the index file?

My index goes like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
    <div id="page-wrap">
    <?php include_once("header2.html"); ?>
    </div>
</body>
</html>

With this CSS:

* {
    padding: 0px;
    margin: 0px;
}

My header.html (the one that’s being included):

<h1>Header 2</h1>

And that’s the output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
    <div id="page-wrap">
    <h1>Header 2</h1>  </div>
</body>
</html>
  • God its so simple that I really dont know where the top margin is coming from (in all browsers).
  • It only happens when I use php includes.
  • The source code looks the same as when I dont use php include.
Was it helpful?

Solution

This is pretty weird, but I copied & pasted your output HTML into Notepad++, and there was a strange character just prior to the h1. When pasting it into Notepad, the h in the h1 was subscripted.

Therefore, it looks to me like you may have an erroneous (or unexpected for PHP) character in your included HTML (or in the PHP including it). My suspicion? The dreaded UTF-8 BOM. Try to change the encoding of your included HTML file to eliminate the BOM (which I've always had problems with when dealing with PHP).

Edit: Yep. Just verified with a hex editor. There's a byte-order mark at the beginning of your included HTML. I don't know which editor you use, but you should have the option to change your text encoding settings.

See this for more info about PHP & the BOM.

OTHER TIPS

You ought to post your generated HTML, like by copying what you see when you select "View Source" from your web browser. Oftentimes, I've seen mysterious blank lines in PHP-generated HTML because PHP is configured to output errors and warnings. Even if this is not caused by that, we can more-easily diagnose the problem if we see the outputted HTML.

well, without knowing what's in your php include, it's hard to tell, but make sure there's no CSS inside of it. also make sure that CSS you're loading is getting found and loaded. i debug by changing the background color or something else visual so u can be sure it's loading.

i'd bet anything that it has nothing to do with the php include it's self. like previously mentioned, there may be some css in the included file that is doing it, but i've never seen php anything like what you are describing.

i would look at the doctype declaration [temporarily remove it to see what happens], and remove the current html declaration tag and replace it with a plain <html> tag [again just temporarily, to debug]

A lot of times an extra new line will be at the end of a PHP script file you are including after the ?> tag. This will cause an extra character to be included in the generated output. You can remedy this problem by not having a closing ?> tag at the very end of your file. PHP knows to "assume" that it's closed.

Do you have the option to give us a link? I just tried locally a couple of things and you may get this "unwanted" new line for apparently "no reason" at all between your content and the "doctype" declaration, if there is a nonprintable character. Try to delete all characters after the ">" and take a look at it with a hexeditor to make certain of it. Please provide us more info.

Thats very interesting, because I just used your markup and your css. I also put it into an php file and included a html file. But there is no margin. Nowhere.

So make sure your browser is able to find the css file with * { margin: 0; padding: 0 }

And I suggest you to use a reset sheet like this one - http://meyerweb.com/eric/tools/css/reset/index.html.

p.s. if you own some webspace, put it online and send us a link.

Dreamweaver drives me nuts with it's automatic BOM additions. Here's the fix:

http://www.adobe.com/support/documentation/en/dreamweaver/mx2004/dwusing_errata/dwusing_errata2.html

I experienced the same problem...so what I did to fix it was to add an html opening comment at the beggining of the first file and an html closing comment at the beginning of the second file. This encloses the BOM (or whatever is appearing in between the files) inside a comment so it's not outputted in html.

For example:

#header.php
<?php ?>
<html>
<!--

#body.php
<?php ?>
-->
<body>
...

I tried to fix the problem converting between encoding formats in notepad++ to no avail. So this is only a temporary fix til I find a better solution to the problem.

I am using notepad and I selected from the menu -> Encoding->Encoding with UTF-8 without BOM and it worked just fine. This should be done for every included file. I think this is the solution to your problem. Have a nice evening.

I almost killed my keyobard trying to solve to problem. Then I tried PSPad editor, change explicitly .inc or .php to UTF-8 and IT WORKED !!

I had one time this problem and here is the way to fix it - its really problem in charset.I have spent 10 hours to find it. In my situation I change at all php files(all php files, all tpl(if you have) files) charset from UTF-8 to UTF-8 without bom and save it and try then. After that you can also make at .htaccess string "AddDefaultCharset UTF-8".

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top