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.

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

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
8,915 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,241 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,267 Points

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

Ryan Field
Ryan Field
Courses Plus Student 21,241 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! :)