Untitled

I have a website, where I uploaded an [index.html](http://www.destiny-craft.com/index.html) which is completely made of HTML code (no PHP).

I copied this code over to an PHP file (`index.php`), and made 1 seperate php file for my header. When I cleaned up the new `index.php` file, I just used an `include()` to include the header, like so:

    <? include("TopNote.php"); ?>

So the difference between `index.html` and `index.php` is that the HTML code is directly in the `index.html` and in the PHP file, it is included from a seperate PHP file.

Now the index.php file give a strange button, where the index.html displays it all the way i want it to display.


`index.html`:

    <!doctype html>
    <html lang="us">
    <head>
        <meta charset="utf-8">
        <title>Destiny-Craft</title>
        <link rel="stylesheet" type="text/css" href="web/style.css">
        <link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
        <style>
        .ui-menu { position: absolute; width: 100px; }
      </style>
        <script src="js/jquery-1.9.1.js"></script>
        <script src="js/jquery-ui-1.10.3.custom.js"></script>
        <script>
        $(function() {

            $( "#menu" ).buttonset();

            $( "#regdialog" ).dialog({
          autoOpen: false,
          closeOnEscape: false,
          show: {
            effect: "blind",
            duration: 1000
          },
          hide: {
            effect: "blind",
            duration: 1000
          }
        });

        $( "#buttonregister" ).click(function() {
          $( "#regdialog" ).dialog( "open" );
        });
        });
        $(function() {
        $( "#StaffLogin" )
          .button()
          .click(function() {
            alert( "Here Staff Could Login, If That Would Work :)" );
          })
          .next()
            .button({
              text: false,
              icons: {
                primary: "ui-icon-triangle-1-s"
              }
            })
            .click(function() {
              var menu = $( this ).parent().next().show().position({
                my: "left top",
                at: "left bottom",
                of: this
              });
              $( document ).one( "click", function() {
                menu.hide();
              });
              return false;
            })
            .parent()
              .buttonset()
              .next()
                .hide()
                .menu();
      });
        </script>

    <!-- Start of the headers for CoffeeCup Web Form Builder -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="http://destiny-craft.coffeecup.com/forms/ApplyForm/colorbox/colorbox.css" />
    <script src="http://destiny-craft.coffeecup.com/forms/ApplyForm/common/libs_js/jquery-1.4.4.min.js"></script>
    <script src="http://destiny-craft.coffeecup.com/forms/ApplyForm/colorbox/jquery.colorbox.js"></script>
    <script>
        var $fb_pop = jQuery.noConflict();

        $fb_pop(document).ready(function(){
                // Fallback for Safari browser
                if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 ) {
                        $fb_pop('.fb_iframe').click( function(){
                                var temp_window = window.open('http://destiny-craft.coffeecup.com/forms/ApplyForm/','ApplyForm','width=0,height=0');
                                window.focus();
                                setTimeout(function() {temp_window.close();},1000);
                        } );
                }
                $fb_pop(".fb_iframe").colorbox({iframe:true, innerWidth:"788px", height:"80%", maxHeight:"1157px", fixed:true });
        });
    </script>
    <!-- End of the headers for CoffeeCup Web Form Builder -->
        </head>
    <body bgcolor="#aaaaaa">
    <img src="http://destiny-craft.com/img/Logo_Resized.png" alt="" style="padding-left:20px" />
    <div align="right" style="padding-right:20px">
      <div>
        <button id="StaffLogin">Staff Login</button>

        <button id="select">Select an action</button>
      </div>
      <ul>
        <li><a href="#">Log Out</a></li>
        <li id="buttonregister"><a href="#">Register</a></li>
      </ul>
    </div>
    <form style="margin-top: 1em;">
       <div id="menu" align="center">
                <input type="radio" id="buttonhome" name="radio" checked="checked"><label for="buttonhome">Home</label>
                <input type="radio" id="buttonforums" name="radio"><label for="buttonforums"><a href="http://forums.destiny-craft.com">Forums</a></label>
                <input type="radio" id="buttonapply" name="radio"><label for="buttonapply"><a class='fb_iframe' href="http://destiny-craft.coffeecup.com/forms/ApplyForm/">Apply</a></label>
            <input type="radio" id="buttonabout" name="radio"><label for="buttonabout">About Us</label>
            <input type="radio" id="select" name="radio">
        </div>
    </form>


    <br />
    <div class="ui-widget">
        <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
                <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
                <strong>Alert:</strong> The Site Is No Where Near Completed, Please go to our <a href="http://forums.destiny-craft.com/">Forums</a></p>
        </div>
    </div>


    <!-- POP UP -->
    <div id="regdialog" title="Register">
    <form action="#" method="post">
    <div class="ui-widget">
                <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
                        <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span

    >
                        Registrations are not working!</p>
                </div>
        </div>
        <h5>Username:</h5>
        <input type="text" name="reg_name">
        <h5>Password:</h5>
        <input type="password" name="reg_pass">
        <h5>Confirm Password:</h5>
        <input type="password" name="reg_pass_conf">
        <input type="submit">
    </form>
    </div>
    </body>
    </html>


`index.php`:

    <!doctype html>
    <html lang="us">
    <head>
        <meta charset="utf-8">
        <title>Destiny-Craft</title>
        <link rel="stylesheet" type="text/css" href="web/style.css">
        <link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
        <script src="js/jquery-1.9.1.js"></script>
        <script src="js/jquery-ui-1.10.3.custom.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        </head>
    <body bgcolor="#aaaaaa">
    <? include("TopNote.php"); ?>
    </body>
    </html>

`topnote.php`

    <!doctype html>
    <html lang="us">
    <head>
        <meta charset="utf-8">
        <title>Destiny-Craft</title>
        <link rel="stylesheet" type="text/css" href="web/style.css">
        <link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
        <style>
        .ui-menu { position: absolute; width: 100px; }
      </style>
        <script src="js/jquery-1.9.1.js"></script>
        <script src="js/jquery-ui-1.10.3.custom.js"></script>
        <script>
        $(function() {
            $( "#menu" ).buttonset();

            $( "#regdialog" ).dialog({
          autoOpen: false,
          closeOnEscape: false,
          show: {
            effect: "blind",
            duration: 1000
          },
          hide: {
            effect: "blind",
            duration: 1000
          }
        });

        $( "#buttonregister" ).click(function() {
          $( "#regdialog" ).dialog( "open" );
        });
        });
        $(function() {
        $( "#StaffLogin" )
          .button()
          .click(function() {
            alert( "Here Staff Could Login, If That Would Work :)" );
          })
          .next()
            .button({
              text: false,
              icons: {
                primary: "ui-icon-triangle-1-s"
              }
            })
            .click(function() {
              var menu = $( this ).parent().next().show().position({
                my: "left top",
                at: "left bottom",
                of: this
              });
              $( document ).one( "click", function() {
                menu.hide();
              });
              return false;
            })
            .parent()
              .buttonset()
              .next()
                .hide()
                .menu();
      });
        </script>

    <!-- Start of the headers for CoffeeCup Web Form Builder -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="http://destiny-craft.coffeecup.com/forms/ApplyForm/colorbox/colorbox.css" />
    <script src="http://destiny-craft.coffeecup.com/forms/ApplyForm/common/libs_js/jquery-1.4.4.min.js"></script>
    <script src="http://destiny-craft.coffeecup.com/forms/ApplyForm/colorbox/jquery.colorbox.js"></script>
    <script>
        var $fb_pop = jQuery.noConflict();

        $fb_pop(document).ready(function(){
                // Fallback for Safari browser
                if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 ) {
                        $fb_pop('.fb_iframe').click( function(){
                                var temp_window = window.open('http://destiny-craft.coffeecup.com/forms/ApplyForm/','ApplyForm','width=0,height=0');
                                window.focus();
                                setTimeout(function() {temp_window.close();},1000);
                        } );
                }
                $fb_pop(".fb_iframe").colorbox({iframe:true, innerWidth:"788px", height:"80%", maxHeight:"1157px", fixed:true });
        });
    </script>
    <!-- End of the headers for CoffeeCup Web Form Builder -->
        </head>
    <body bgcolor="#aaaaaa">
    <img src="http://destiny-craft.com/img/Logo_Resized.png" alt="" style="padding-left:20px" />
    <div align="right" style="padding-right:20px">
      <div>
        <button id="StaffLogin">Staff Login</button>

        <button id="select">Select an action</button>
      </div>
      <ul>
        <li><a href="#">Log Out</a></li>
        <li id="buttonregister"><a href="#">Register</a></li>
      </ul>
    </div>
    <form style="margin-top: 1em;">
       <div id="menu" align="center">
                <input type="radio" id="buttonhome" name="radio" checked="checked"><label for="buttonhome">Home</label>
                <input type="radio" id="buttonforums" name="radio"><label for="buttonforums"><a href="http://forums.destiny-craft.com">Forums</a></label>
                <input type="radio" id="buttonapply" name="radio"><label for="buttonapply"><a class='fb_iframe' href="http://destiny-craft.coffeecup.com/forms/ApplyForm/">Apply</a></label>
            <input type="radio" id="buttonabout" name="radio"><label for="buttonabout">About Us</label>
            <input type="radio" id="select" name="radio">
        </div>
    </form>


    <br />
    <div class="ui-widget">
        <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
                <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
                <strong>Alert:</strong> The Site Is No Where Near Completed, Please go to our <a href="http://forums.destiny-craft.com/">Forums</a></p>
        </div>
    </div>


    <!-- POP UP -->
    <div id="regdialog" title="Register">
    <form action="#" method="post">
    <div class="ui-widget">
        <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
                <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
                Registrations are not working!</p>
        </div>
    </div>
        <h5>Username:</h5>
        <input type="text" name="reg_name">
        <h5>Password:</h5>
        <input type="password" name="reg_pass">
        <h5>Confirm Password:</h5>
        <input type="password" name="reg_pass_conf">
        <input type="submit">
    </form>
    </div>
    </body>
    </html>

What is the difference, and how do i solve it?