#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    367
    Rep Power
    46

    Breaking Code into Modules


    Hi:

    I like to have my web sites comprised of many php "modules" which are called into a single file using "include" statements. This way the files are easier to edit and they are re-usable in multiple pages or sites.

    The problem is each "include" statement forces blank space between the modules which changes the design of a page. As an example, if I have the following code:

    PHP Code:
    <!--------------Header--------------->
    echo <<<EOT
    <header> 
        <div class="some class">
            <div class="row">
                         Some content including Logo, Company name, etc.
            </div>
        </div>
    </header>
    EOT;
    echo <<<EOT
    <!--------------Navigation--------------->

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    EOT; 
    These two sections appear one on top of the other with no space between them (desired).

    However, if I create a separate file for each "echo" statement and then include them in a "master" file, the sections appear separated with the page background color between them.

    Strangely enough, if I view the source of the original page and the "master" page in the browser, the "master" page is actually more dense (not as many spaces):

    Original page:
    </div>
    </header>

    <!--------------Navigation--------------->

    <nav>
    "master" page:
    </div>
    </header><!--------------Navigation--------------->
    <nav>
    Can anyone think of a way to avoid this?

    Thanks
    Last edited by SeanF; July 30th, 2013 at 02:28 PM.
  2. #2
  3. Sarcky
    Devshed Supreme Being (6500+ posts)

    Join Date
    Oct 2006
    Location
    Pennsylvania, USA
    Posts
    10,690
    Rep Power
    6351
    You could just insert those extra line breaks in your individual files.
    HEY! YOU! Read the New User Guide and Forum Rules

    "They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety." -Benjamin Franklin

    "The greatest tragedy of this changing society is that people who never knew what it was like before will simply assume that this is the way things are supposed to be." -2600 Magazine, Fall 2002

    Think we're being rude? Maybe you asked a bad question or you're a Help Vampire. Trying to argue intelligently? Please read this.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    367
    Rep Power
    46
    Originally Posted by ManiacDan
    You could just insert those extra line breaks in your individual files.
    Thanks for the response.

    Actually I don't want the extra breaks.

    The two (horizontal) sections are supposed to be adjacent to each other with no space between them and that's how they appear in the original file. When the original code is broken into two separate files and each is called separately using an "include" statement, the sections break apart with background color between them. This is what I don't want.
  6. #4
  7. Sarcky
    Devshed Supreme Being (6500+ posts)

    Join Date
    Oct 2006
    Location
    Pennsylvania, USA
    Posts
    10,690
    Rep Power
    6351
    The position of your HTML elements should not be affected by the whitespace between the tags. However, exactly ZERO whitespace may have a small effect, like the breaks you're seeing.

    Therefore, make the master output look like the one you want. Add the line breaks or whatever, and maybe the space between your elements will disappear.

    This isn't a PHP question really, it's your CSS/HTML that's posing the problems.
    HEY! YOU! Read the New User Guide and Forum Rules

    "They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety." -Benjamin Franklin

    "The greatest tragedy of this changing society is that people who never knew what it was like before will simply assume that this is the way things are supposed to be." -2600 Magazine, Fall 2002

    Think we're being rude? Maybe you asked a bad question or you're a Help Vampire. Trying to argue intelligently? Please read this.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    367
    Rep Power
    46
    Originally Posted by ManiacDan
    The position of your HTML elements should not be affected by the whitespace between the tags. However, exactly ZERO whitespace may have a small effect, like the breaks you're seeing.

    Therefore, make the master output look like the one you want. Add the line breaks or whatever, and maybe the space between your elements will disappear.

    This isn't a PHP question really, it's your CSS/HTML that's posing the problems.
    OK, thanks... adding spaces doesn't seem to have an effect. It's the act of using two PHP "include" statements which is causing the problem which is why I posted it here. But you may be right that it is more appropriately solved with CSS.

    I know the forum does not like duplicate / cross posting... how do I get visibility on the CSS forum?
  10. #6
  11. Sarcky
    Devshed Supreme Being (6500+ posts)

    Join Date
    Oct 2006
    Location
    Pennsylvania, USA
    Posts
    10,690
    Rep Power
    6351
    It can't possibly be the act of using include files, that's what I'm saying. 100% not the cause. You have a typo or a missed CSS file or some other difference than the include statements. The HTML can't just "know" how many PHP files were used to construct it. An output string is an output string.

    I've moved this over to the CSS forum.
    HEY! YOU! Read the New User Guide and Forum Rules

    "They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety." -Benjamin Franklin

    "The greatest tragedy of this changing society is that people who never knew what it was like before will simply assume that this is the way things are supposed to be." -2600 Magazine, Fall 2002

    Think we're being rude? Maybe you asked a bad question or you're a Help Vampire. Trying to argue intelligently? Please read this.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    367
    Rep Power
    46
    Originally Posted by ManiacDan
    It can't possibly be the act of using include files, that's what I'm saying. 100% not the cause. You have a typo or a missed CSS file or some other difference than the include statements. The HTML can't just "know" how many PHP files were used to construct it. An output string is an output string.

    I've moved this over to the CSS forum.
    Well... it doesn't make sense to me either but here's the exact code from the index.php file:

    PHP Code:
    include ('./header.inc.php');
    include (
    './navigation.inc.php');
    include (
    './image_slider.inc.php'); 
    "header.inc.php" includes the company logo and a search tool
    PHP Code:
    <!--------------Header--------------->
    <
    header
        <
    div class="zerogrid">
            <
    div class="row">
                <
    div class="col05">
                    <
    div id="logo"><a href=""><img src="images/logos/logo_600_240_grey2.gif"/></a>
                    </
    div>
                </
    div>
                <
    div class="col06 offset05">
                    <
    div id="searchbox">
                        <
    form class="searchform">
                            <
    input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}">
                            <
    input class="searchbutton" type="button" value="Go">
                        </
    form>
                    </
    div>
                </
    div>
            </
    div>
        </
    div>
    </
    header
    "navigation.inc.php" includes the site navigation buttons
    PHP Code:
    <!--------------Navigation--------------->
    <
    nav>  
        <
    ul>
            <
    li><a href="index.php">Home</a></li>
            <
    li><a href="about_us.php">About Us</a></li>
            <
    li><a href="business_consulting.php">Business Consulting</a></li>
            <
    li><a href="web_development.php">Web Development</a></li>
            <
    li><a href="responsive_design.php">Responsive Design!</a></li>
            <
    li><a href="http://www.fawcettdesigns.com" target="_blank">Yacht Design</a></li>
        </
    ul>
    </
    nav
    Each of these sections has a black background but the page/container background is blue. With the two blocks being "included" separately, the blue container background is visible between the two sections.

    Then, however, if I comment out the "include ('./navigation.inc.php');" statement and copy the contents into the header.inc.php file directly, the two sections are immediately adjacent with no background showing between them. In this case, the navigation.inc.php file is disregarded and the header.inc.php file reads as such:


    PHP Code:
    <!--------------Header--------------->
    <
    header
        <
    div class="zerogrid">
            <
    div class="row">
                <
    div class="col05">
                    <
    div id="logo"><a href=""><img src="images/logos/logo_600_240_grey2.gif"/></a>
                    </
    div>
                </
    div>
                <
    div class="col06 offset05">
                    <
    div id="searchbox">
                        <
    form class="searchform">
                            <
    input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}">
                            <
    input class="searchbutton" type="button" value="Go">
                        </
    form>
                    </
    div>
                </
    div>
            </
    div>
        </
    div>
    </
    header>  
    <!--------------
    Navigation--------------->
    <
    nav>  
        <
    ul>
            <
    li><a href="index.php">Home</a></li>
            <
    li><a href="about_us.php">About Us</a></li>
            <
    li><a href="business_consulting.php">Business Consulting</a></li>
            <
    li><a href="web_development.php">Web Development</a></li>
            <
    li><a href="responsive_design.php">Responsive Design!</a></li>
            <
    li><a href="http://www.fawcettdesigns.com" target="_blank">Yacht Design</a></li>
        </
    ul>
    </
    nav
    Doesn't make sense to me either, but that's the exact code and that's what's happening...

    Confused.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    This looks like the classic newline at the end of each included file issue. However, that doesn't usually cause a display/CSS issue.

    Would you please provide a link to an example page, so we could take a look at it?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    367
    Rep Power
    46
    Originally Posted by Kravvitz
    This looks like the classic newline at the end of each included file issue. However, that doesn't usually cause a display/CSS issue.

    Would you please provide a link to an example page, so we could take a look at it?
    So, Ive created two copies of the index.php file.

    http://www.fawcettdesigns.com/index_1_include.php has the "header" and "navigation" include files combined into one. You will see that the logo bar and the navigation bar fit snugly against each other.

    http://www.fawcettdesigns.com/index_2_includes.php includes the "header" and "navigation" files as separate include statements. You will see that the logo bar and the navigation bar are separated by a blank line of background.

    Incidentally, I have the following code on the pages to fix the display issues with IE.

    PHP Code:
    <!DOCTYPE html>
    <!--[if 
    lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
    <!--[if 
    IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
    <!--[if 
    IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
    <!--[if (
    gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> 
    If I have this in a separate include file, IE will not recognize it... it has to be in the actual code of the parent page... Again, some odd anomaly in the way include files are being parsed?
    Last edited by SeanF; August 1st, 2013 at 07:43 AM.
  18. #10
  19. Sarcky
    Devshed Supreme Being (6500+ posts)

    Join Date
    Oct 2006
    Location
    Pennsylvania, USA
    Posts
    10,690
    Rep Power
    6351
    The closing header tag is screwed up in your second document. The string which you see as "</header>" contains THREE unprintable junk characters which are screwing up your output and CSS. Delete that line and retype it.
    HEY! YOU! Read the New User Guide and Forum Rules

    "They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety." -Benjamin Franklin

    "The greatest tragedy of this changing society is that people who never knew what it was like before will simply assume that this is the way things are supposed to be." -2600 Magazine, Fall 2002

    Think we're being rude? Maybe you asked a bad question or you're a Help Vampire. Trying to argue intelligently? Please read this.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    367
    Rep Power
    46
    Originally Posted by ManiacDan
    The closing header tag is screwed up in your second document. The string which you see as "</header>" contains THREE unprintable junk characters which are screwing up your output and CSS. Delete that line and retype it.
    Really? I wonder why I don't see them. I use TextWrangler with non printing characters displayed and this is s acreen capture of what the code looks like:


    In any case, I have removed everything from the last </div> to the end of the file and it has not changed anything.

    BTW, thanks for your continued comments on this.
  22. #12
  23. Sarcky
    Devshed Supreme Being (6500+ posts)

    Join Date
    Oct 2006
    Location
    Pennsylvania, USA
    Posts
    10,690
    Rep Power
    6351
    Your URLs still contain the bad characters. A is the first one you linked, B is the second. I copied just the header line and the opening bracket after it into this script:

    PHP Code:
    <?php
    $a 
    '</header>
    <'
    ;
    $b '</header>
    <'
    ;

    for ( 
    $p 0$p strlen($a); $p++ ) {
      echo 
    $a[$p];
      if ( 
    $a[$p] != $b[$p] ) {
        echo 
    " DIFFERENT:  A is {$a[$p]} (" ord($a[$p]) . ") and B is {$b[$p]}(" ord($b[$p]) . ")";
      }
      echo 
    "\n";
    }
    The output is:
    Code:
    <
    /
    h
    e
    a
    d
    e
    r
    >
    
     DIFFERENT:  A is 
     (10) and B is �(239)
    < DIFFERENT:  A is < (60) and B is �(187)
    You have two non-printing characters in this file. Ascii value 239 and Ascii value 187. It's possible this happens EVERY time at the end of your files, and your files are encoded wrong. Either way, this is your issue, these characters appear in one file and not the other at the exact place the error appears.
    HEY! YOU! Read the New User Guide and Forum Rules

    "They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety." -Benjamin Franklin

    "The greatest tragedy of this changing society is that people who never knew what it was like before will simply assume that this is the way things are supposed to be." -2600 Magazine, Fall 2002

    Think we're being rude? Maybe you asked a bad question or you're a Help Vampire. Trying to argue intelligently? Please read this.
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    367
    Rep Power
    46
    Originally Posted by ManiacDan
    You have two non-printing characters in this file. Ascii value 239 and Ascii value 187. It's possible this happens EVERY time at the end of your files, and your files are encoded wrong. Either way, this is your issue, these characters appear in one file and not the other at the exact place the error appears.
    Ahhhhh... Thank you, thank you! You are right.

    These files were saved with the wrong encoding. They were set to:
    Line Breaks: Windows (CRLF)
    Encoding: Unicode (UTF-8, with BOM)

    After re-saving as:
    Line Breaks: Unix (LF)
    Encoding: Unicode (UTF-8)

    The problem was solved.

    While we are at it... what is the optimal encoding for this application?

    Thanks so much.
  26. #14
  27. Sarcky
    Devshed Supreme Being (6500+ posts)

    Join Date
    Oct 2006
    Location
    Pennsylvania, USA
    Posts
    10,690
    Rep Power
    6351
    UTF-8 without the BOM is correct.

    Glad it's working, I'm sure it was driving you crazy.
    HEY! YOU! Read the New User Guide and Forum Rules

    "They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety." -Benjamin Franklin

    "The greatest tragedy of this changing society is that people who never knew what it was like before will simply assume that this is the way things are supposed to be." -2600 Magazine, Fall 2002

    Think we're being rude? Maybe you asked a bad question or you're a Help Vampire. Trying to argue intelligently? Please read this.

IMN logo majestic logo threadwatch logo seochat tools logo