Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Yusuf Wyatt
3,107 PointsGetting an ugly white box surrounding my shirt img on my simple PHP project header
After I coded in the underline to the header shirt image, an ugly white box surrounded the image but it didn't do the same thing when I coded the underline on the rest of the header images. Can someone please tell me how to get rid of this? It only shows up on my index.php page and not on the rest of the project pages
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Yusuf,
The problem is that the $section variable is undefined on the index page but your navigation scripts are still running on that page and trying to use this undefined $section variable. PHP outputs a notice error and this causes unintended styles to be applied on the home page.
The solution I recommend is to update those scripts to first check if the variable is set first before trying to 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>
<li class="cart"><a href="#">Shopping Cart</a></li>
This way, if these scripts are run on a page that doesn't use the $section variable then it's not going to produce the notice error.
Let me know if you have any questions about it.
Yusuf Wyatt
3,107 PointsJason, you're the MAN!! It worked and the ugly white box is gone. Question though, how come the ugly white box only showed up under the shirt img and not any of the other background images? Is there a specific reason for that?
Jason Anello
Courses Plus Student 94,610 PointsIt helps to look at the html with the notice error in it.
<li class="shirts <br /> <b>Notice</b>: Undefined variable: section in <b>C:\xampp\htdocs\shirts4mike\inc\header.php</b> on line <b>21</b><br /> ">
<a href="shirts.php">Shirts</a>
</li>
<li class="contact <br /> <b>Notice</b>: Undefined variable: section in <b>C:\xampp\htdocs\shirts4mike\inc\header.php</b> on line <b>22</b><br /> ">
<a href="contact.php">Contact</a>
</li>
<li class="cart">
<a href="#">Shopping Cart</a>
</li>
You can use your browser's developer tools to see this. I use firebug with firefox.
What happened is that since the php scripts are run inside the class attribute, the notice error is output where those scripts were. Which is right inside the class attribute.
So the browser is now interpreting each part of the message as a class name.
Using firebug I was able to see that the "shirts" list item was getting the following styles applied to it: (line 605 from style.css)
.section.shirts {
background: none repeat scroll 0 0 #FFFFFF;
padding-bottom: 42px;
}
This targets any element that has both a "shirts" class and a "section" class.
Looking back through the notice error you'll see that it has both classes.
class="shirts <br /> <b>Notice</b>: Undefined variable: section in...
Nothing extra happens to match up for the "contact" link so we don't get any extra unintended styling.
Another thing to notice is that both of the links are underlined even on the hp. If you look towards the end of each notice you'll see the word on. The "on" class is what we're using to underline the current page. So both links are underlined on the hp because of the notice.