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
Chris Shaffer
12,030 PointsChallenge is broken - doesn't properly recognize box-shadow property
The proper answer to this challenge is to use:
box-shadow: 0 2px 15px #aaa, 0 0 60px 5px firebrick inset;
however, the code check won't recognize that I have "inset" in my second shadow and says that it isn't there.
It's annoying as hell that I even have to do this to get through to the next stage as I've already FAR surpassed this level of CSS but since you updated your Track, I'm forced to retake it.
/* Complete the challenge by writing CSS below */
.main-heading {
text-shadow: 0 0 5px #be7b31;
}
.title {
text-shadow: 1px 3px 0 #e59740;
}
.main-header {
box-shadow: 0 2px 15px #aaa, 0 0 60px 5px firebrick inset;
}
<!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 »</a>
</footer>
</body>
</html>
Tom Bedford
15,645 PointsHi Chris, I thought it would be useful to look at the CSS3 specification on this. The current thinking is:
Allow <color> and ‘inset’ to be interleaved in any order in ‘box-shadow’, since they are not ambiguous and CSS generally allows variant ordering where not ambiguous.
So it should be accepted either way.
4 Answers
Wayne Priestley
19,579 PointsHi Chris,
MDN requires box-shadow as follows Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
Not sue where you got you example from but even though it might work i would suggest sticking with the semantically correct method set out by w3c
Hope this helps.
Chris Shaffer
12,030 PointsStraight from W3schools.com: CSS Syntax box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
Wayne Priestley
19,579 PointsW3Schools isn't really a website thats recommended by Treehouse.
I would stick to MDN or W3C to get reliable information on web standards.
At the end of the day, the challenges can only except the code the way it is taught in the lessons, it would take far to much work to build an algorithm that excepted every single possible answer, sometimes you can get away without closing tags, sometimes without a semi colon. But that isn't how Treehouse teaches us to code.
Stating your code is absolutely correct and Treehouse is in the wrong isn't going to help you pass a code challenge.
Putting the correct code in as taught by Treehouse will, thats the idea behind all the courses.
I've already FAR surpassed this level of CSS
You should be able to fly through the challenges if this is the case, I don't see the point of posting on the forum that the challenge is broken because it will not except the wrong code (wrong as in not the way it has been taught) your code might work in the browser but thats not the code the challenge is looking for.
Instead of complaining about it why not just enter the correct code and move on through the track, or if it is really as annoying as you say it is just leave the track and complete the lessons individually in the Library. All a track is, is a bunch of individual lessons from the library put together, that way you can skip the lessons that are too easy for your level of expertise.
Hope this helps.
Wayne Priestley
19,579 PointsChris,
Long story short, the code challenge needs to be adjusted to not check for the exact "phrase" and instead separately check that each value exists where it should on the property. As it stands, the code check is incomplete.
Really!
I disagree, I think that it is reasonable to expect students to enter the answer how they were taught in the lessons.
We are not all css experts that have knowledge that FAR surpasses that which is taught in the course.
box-shadow: 0 2px 15px #aaa, 0 0 60px 5px firebrick inset
// Did you actually notice the MDN example you gave does NOT match the order of the code you posted.
[inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color
At the end of the day, the challenges can only except the code the way it is taught in the lessons, it would take far to much work to build an algorithm that excepted every single possible answer, sometimes you can get away without closing tags, sometimes without a semi colon. But that isn't how Treehouse teaches us to code.
Below is a screenshot from MDN regarding box-shadows Please note the difference in order between your code and this.
Instead of complaining about it why not just enter the correct code and move on through the track, or if it is really as annoying as you say it is just leave the track and complete the lessons individually in the Library. All a track is, is a bunch of individual lessons from the library put together, that way you can skip the lessons that are too easy for your level of expertise.
Chris Shaffer
12,030 PointsAgain, please go back and TAKE the lesson: the way I did this is the way it was done in the original lesson where this was taught. It was done differently in the newest video, but the standard hasn't changed.
The inset value can literally be placed anywhere and will work fine, no errors and meets the W3C standard requirements.
Second, if you're going to lecture and get an attitude, then at least reference the source of the standard, W3C. MDN does not dictate web standards. The web standard has no preferential order to the values, except the pixel values which are applied in a specific order.
Going to MDN and quoting them is the equivalent to going to Samsung or Sony to quote their electronics standards when they're actually set by IEEE.
MDN is a great resource, but they aren't the internet gods.
Wayne Priestley
19,579 PointsSecond, if you're going to lecture and get an attitude, then at least reference the source of the standard, W3C. MDN does not dictate web standards.
Hmm, I think you'll find that W3C DOES in fact set the web standards, I thought someone with your FAR superior knowledge of code would know this. And as for having an attitude, I think your arrogant opening post set the standard here.
At the end of the day, YOUR code was wrong, swallow that pill and move on.
The challenges can only except the code the way it is taught in the lessons, it would take far to much work to build an algorithm that excepted every single possible answer, sometimes you can get away without closing tags, sometimes without a semi colon.
Except this, or offer your FAR superior skills in fixing it.
It truly is time to unsubscribe to this thread.
Chris Shaffer
12,030 PointsHmm, I think you'll find that W3C DOES in fact set the web standards, I thought someone with your FAR superior knowledge of code would know this. And as for having an attitude, I think your arrogant opening post set the standard here.
You clearly want a fight, so have it: go back and READ my post. READ the W3C standard. I SAID that W3C set the standard and MDN does not, which is 100% correct.
That said, if you READ MY PREVIOUS QUOTE, you'll also see the example provided, based on both MDN and W3C indicates the order doesn't matter; it's non-formal syntax.
The example, if you READ my post above given by W3C, uses the exact format that I used. It is 100% correct.
from W3C, same page you quoted:
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
12px 12px 0px 8px rgba(0,0,0,0.4) inset;
My argument is NOT for bad code, but for code challenge logic that makes sense, according to the web standard.
Learning is not achieved by fighting a broken system, that is the only concern, not whether or not I'm right.
You clearly have a stick up your ass about this, so maybe find something else to do in your free time other than harass me.
Chris Shaffer
12,030 PointsI'm sorry, maybe you didn't read my original post. This IS the syntax, per MDN and W3C:
MDN:
Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#.
WC3:
The components of each <shadow> are interpreted as follows:
1st <length>
Specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
2nd <length>
Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.
3rd <length>
Specifies the blur radius. Negative values are not allowed. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred. See Shadow Blurring, below.
4th <length>
Specifies the spread distance. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract. See Shadow Shape, below.
Note that for inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow’s perimeter shape.
<color>
Specifies the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.
‘inset’
If present, the ‘inset’ keyword changes the drop shadow from an outer box-shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner box-shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).
And here's an example - PROVIDED BY W3C:
The example below demonstrates the effects of spread and blur on the shadow:
width: 100px; height: 100px;
border: 12px solid blue; background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
12px 12px 0px 8px rgba(0,0,0,0.4) inset;
I've been doing CSS professionally for a few years and never run into a situation where this syntax was not correct. The example from W3C has been the exact format I've always used.
As Tom Bedford said, it should be accepted either way but based on W3C, my format is not only correct, so is Tom.
Long story short, the code challenge needs to be adjusted to not check for the exact "phrase" and instead separately check that each value exists where it should on the property. As it stands, the code check is incomplete.
Chris Shaffer
12,030 PointsChris Shaffer
12,030 PointsSo here's the problem: you're system for some reason requires the fundamentally WRONG way of inputting this value:
Instead of the CSS3 standard method of doing this:
box-shadow: 0 2px 15px #aaa, 0 0 60px 5px firebrick inset;The code challenge requires the values to be written in this, completely non-standard order:
box-shadow: 0 2px 15px #aaa, inset 0 0 60px 5px firebrick;This isn't wrong, it just isn't the standard method. It's also not the method taught in the video. It's kind of ridiculous to require this.