Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Mike's T-shirts: why is there a white wrapper around "shirts" on my index page?

I wrote the same code on each page: ''' <?php $pageTitle = "Unique T-shirts designed by a frog"; include('inc/header.php'); ?> ''' On the index page there is this white wrapper around the text "shirts" which should not be there. On all other pages it looks normal.

https://plus.google.com/photos/112022764429129319169/albums/6026768110675541505/6033646029402623442?banner=pwa&pid=6033646029402623442&oid=112022764429129319169

I think you're going to have to paste in your code if you want a quick answer :-) An alternative is to download the project files and compare.

4 Answers

Ok the header.php is the same everywhere:

<html>
<head>
    <title><?php echo $pageTitle; ?></title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700" type="text/css">
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>

    <div class="header">

        <div class="wrapper">

            <h1 class="branding-title"><a href="./">Shirts 4 Mike</a></h1>

            <ul class="nav">
                <li class="shirts <?php if ($section == "shirts") { echo "on"; } ?>"><a href="shirts.php">Shirts</a></li>
                <li class="contact <?php if ($section == "contact") { echo "on"; } ?>"><a href="contact.php">Contact</a></li>
                <li class="cart"><a href="#">Shopping Cart</a></li>
            </ul>

        </div>

    </div>

    <div id="content">

And I just included it in all pages with the code I wrote in the previous post above. Thank you, I'll download the files and have a look!

If you're header is the same, and other pages are working, it sounds like a problem with the index page. I would check +You've closed all your divs +You haven't misspelled any of the classes/id's +You haven't accidentally used 'id' instead of 'class' Hope this helps!

Yes, probably it's some spelling error or not closing tags properly. I replaced my index code with the project code and now the index page looks good again! :)

Hi Silvia,

The $section variable is undefined on the home page and so php issues a notice on that page right inside your class attributes. Each part of the notice message is then interpreted as a class name by the browser. This is why you end up getting the unintended styling that you see on the home page.

This never comes up in the video if I remember right but they do have a fix for it in the project files which is probably why it worked out for you when you switched over.

They added $section = "home"; to index.php. So even though it's not needed on that page at least it's defined and you won't get the notices anymore.

I recommend instead to update the navigation scripts to check first if the $section variable is set. This way you don't have to remember to set the $section variable to something even on the pages that don't use it.

<li class="shirts<?php if ( isset($section) && $section == "shirts") { echo " on"; } ?>"><a href="shirts.php">Shirts</a></li>
<li class="contact<?php if ( isset($section) && $section == "contact") { echo " on"; } ?>"><a href="contact.php">Contact</a></li>