SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast andygout's Avatar
    Join Date
    Jun 2012
    Location
    London, United Kingdom, United Kingdom
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,747
    Mentioned
    65 Post(s)
    Tagged
    0 Thread(s)
    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?
    Never grow up. The instant you do, you lose all ability to imagine great things, for fear of reality crashing in.

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2009
    Location
    South Carolina
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Each day is a learning experience.

  4. #4
    SitePoint Enthusiast andygout's Avatar
    Join Date
    Jun 2012
    Location
    London, United Kingdom, United Kingdom
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    SitePoint Member
    Join Date
    Aug 2012
    Location
    israel
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try to start your css at most of the time with

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

    it will fix alot of unwanted results.

  6. #6
    SitePoint Guru bronze trophy TomB's Avatar
    Join Date
    Oct 2005
    Location
    Milton Keynes, UK
    Posts
    988
    Mentioned
    9 Post(s)
    Tagged
    2 Thread(s)
    View the source of the page, check nothing is being sent to the browser before the <html> tag.

  7. #7
    SitePoint Enthusiast andygout's Avatar
    Join Date
    Jun 2012
    Location
    London, United Kingdom, United Kingdom
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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($textENT_QUOTES'UTF-8');
    }

    function 
    htmlout($text)
    {
    echo 
    html($text);
    }
    ?>

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Location
    Surrey, UK
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Martin.

  9. #9
    SitePoint Enthusiast andygout's Avatar
    Join Date
    Jun 2012
    Location
    London, United Kingdom, United Kingdom
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Member
    Join Date
    Aug 2012
    Location
    Washington, United Kingdom
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by andygout View Post
    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($textENT_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.

  11. #11
    SitePoint Enthusiast andygout's Avatar
    Join Date
    Jun 2012
    Location
    London, United Kingdom, United Kingdom
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,412
    Mentioned
    149 Post(s)
    Tagged
    4 Thread(s)
    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.

  13. #13
    SitePoint Enthusiast andygout's Avatar
    Join Date
    Jun 2012
    Location
    London, United Kingdom, United Kingdom
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    SitePoint Enthusiast andygout's Avatar
    Join Date
    Jun 2012
    Location
    London, United Kingdom, United Kingdom
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    **SOLVED**

    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •