2

I am having some weird problem when I use the include '';.

The problem is the margin on top.

with the normal code:

<head>
        <meta charset="utf-8">
        <title>Untittled</title>
        <link rel="stylesheet" href="css/foundation.css">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/custom.css">
        <link rel="stylesheet" href="css/component.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>        
    </head>
        <header class="site-header">
            <nav>
                <div class="handle">Menu</div>
                <ul>
                    <a href=""><li class="logo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li></a>
                    <a href=""><li>Home</li></a>
                    <a href=""><li>Equipa</li></a>
                    <a href=""><li>Torneios</li></a>
                    <a href=""><li>Ranking</li></a>
                    <a href=""><li class="right">Registrar</li></a>
                    <a href=""><li class="right">Login</li></a>
                </ul>
                <ul class="drop">
                    <a href="#"><li>Home</li></a>
                </ul>                 
            </nav>
            <div class="banner">
            </div>
        </header>

The result is: enter image description here But When I separate them into different php files 

<?php include 'includes/head.php'; ?>
<?php include 'includes/header.php'; ?>

I got this weird result: enter image description here

Does enyone knows what is the problem? and how to solve it?

SurvivalMachine
  • 7,946
  • 15
  • 57
  • 87
Matt
  • 428
  • 6
  • 15
  • 2
    @ZeRubeus The margin on top – Matt Feb 22 '15 at 03:24
  • 2
    It looks like you may be missing a `body` element.. which makes your HTML invalid. Have you tried [validating your markup](http://validator.w3.org/)? – Josh Crozier Feb 22 '15 at 03:25
  • @JoshCrozier the rest of the html code is after that part, with the include and the rest of the body elements down, it should work normaly, but dont. – Matt Feb 22 '15 at 03:27
  • 1
    Do the following. Open it in Chrome or Firefox and right click on the unwanted gray margin. Then choose "inspect element". A console will show up in the top and on the right side you see the CSS stylesheets that are causing this together with the source they are coming from. We can't tell the difference from what you have posted – Manuel Arwed Schmidt Feb 22 '15 at 03:35
  • @ManuelArwedSchmidt nice advice, when I do it it apear something like this `" "` between head and the header but I dont have this on my code it only shows on the "inspect element" mode. – Matt Feb 22 '15 at 03:41
  • Is there nothing in the huge lists of styles that is causing your problem? You can try by scrolling through the list on the right and ticking the styles on&off. On the top right corner of every style block you can see the source. If it says like user agent stylesheet then it's one of the internal css files a browser is applying on elements. You can either overide it or try to understand the cause of it. Oh, and yes. You need a body tag and an html tag! – Manuel Arwed Schmidt Feb 22 '15 at 03:44
  • @ManuelArwedSchmidt the problem was with the UTF-8 with BOM like you can see in the answer under, I fixed it and its working, thank you for trying to help :) – Matt Feb 22 '15 at 03:46
  • Good to know. Weird problem, though. Have a successful day :) – Manuel Arwed Schmidt Feb 22 '15 at 03:56

2 Answers2

1

It's been more than 4 years since my last experience with PHP, but I remember having the same problem and text encoding being the reason.

Try to open it with Notepad++ and convert to UTF-8 without BOM.

Here's a quick explanation on UTF-8 with BOM. I hope it helps.

Community
  • 1
  • 1
Paulo Avelar
  • 2,140
  • 1
  • 17
  • 31
0

I think what happens is the browser applies a default value to the top-margin property of:

<?php include 'header.php';?>

The default value of say a p tag is 16px.

My fix is to reverse this value in the include file - header.php. So:

<?php echo "<header style="."margin-top:-16px;".">My Header</header>";?>
Jibba Jabba
  • 1