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

CSS CSS Basics (2014) Enhancing the Design With CSS Text Shadows and Box Shadows

William Cundiff
William Cundiff
9,678 Points
Posted by William Cundiff
William Cundiff
9,678 Points

Box-Shadow Challenge Task 4 of 4 Error. Why won't it pass my correct answer?

I don't understand what i'm doing wrong. Is this just a bug that needs resolved?

style.css 
/* Complete the challenge by writing CSS below */
.main-heading {
  text-shadow: 0px 0px 5px #be7b31;
}

.title {
  text-shadow: 1px 3px 0px #e59740;
}

.main-header {
  box-shadow: 0px 2px 15px #aaa, inset 0px 0px 60px 5px firebrick;
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->

        <footer class="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>
Erik Linden
Erik Linden
14,313 Points

Just wanted to add the comment that I had the same problem but had already tried removing the units from the task four data and as stated before could only make it work when I dropped the unit information from the task 3 answer that passed.

Very frustrating.

3 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, William. Your code is fine and will work in production on a real website, but the challenges here can be finicky sometimes. When you have a value that is 0, we usually leave off the units (whether it's px, em, or something else). If you redo the challenge using this:

.main-header {
  box-shadow: 0 2px 15px #aaa, inset 0 0 60px 5px firebrick;
}

the challenge should pass for you.

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

I have no idea why your code doesn't pass though.

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

You're welcome! The funny thing is that it allows you to pass Step 3 if you have 0px in that declaration, but won't pass you on Step 4. Frustrating, I know! :)