Lesson 8 - Images: Adding Images::Ex 10 - Background: Color::Image linear gradient line of code not being accepted

[wesleyneal346]

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/learn-html-css/lessons/adding-images/exercises/background-color

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
The line of code instructed to put in the the “.btn” class selector is not accepted. Is this something I can fix or is this a bug that should be reported?

When I click “Run,” I get the following error message:

• Error Message: “Did you add the color gradient?”

When I hover over the block of code, I see this warning message:

• Warning: “Missing vendor-prefixed CSS gradients for Firefox 3.6+ Old WebKit
  (Safari 4+, Chrome), Opera 11.1+.”

``` .btn { background-color: #14213D; background-image: -webkit-linear-gradient(#666CCC, #BC1324); color: #FFF; font-family: 'Amatic SC', cursive; font-size: 26px; padding: 14px; } ```

[mtf]

Does the exercise ask for ALL prefixes?

-ms-linear-gradient      for Internet Explorer 10+
-moz-linear-gradient     for Firefox 3.6+
-o-linear-gradient       for Opera 11.10+
-webkit-linear-gradient  for Safari 5+ and Chrome
-webkit-gradient         for Safari 4+ and Chrome (aka "Old WebKit")

[wesleyneal346]

No, the exercise assumes that you are using safari or chrome. I added the correct syntax for each gradient (to be safe, and for fun). The gradients are now working in all browsers (i.e. I can see the cool gradient yellowish to redish) but it is still not excepted. There is a link to the exercise in the topic post, not sure what will happen if you click on it though.

Code:

.btn {
  background-color: #14213D;
  background-image: -moz-linear-gradient(left, #FFD194 0%, #BC1324 100%); /*Firefox3.6+*/
  background-image: -webkit-linear-gradient(left, #FFD194 0%, #BC1324 100%); /* Chrome10+,Safari5.1+ */
  background-image: -webkit-gradient(linear, left, right, color-stop(0%,#FFD194), color-stop(100%,#BC1324)); /* Chrome,Safari4+ */
  background-image: -o-linear-gradient(left, #FFD194 0%, #BC1324 100%); /* Opera 11.10+ */
  background-image: -ms-linear-gradient(left, #FFD194 0%, #BC1324 100%); /* IE10+ */
  background-image: linear-gradient(to right, #FFD194, #BC1324); /*Added after I read Next Post:*/
  color: #FFF;
  font-family: 'Amatic SC', cursive;
  font-size: 26px;
  padding: 14px;
}

[mtf]

I haven’t taken this module yet so cannot access this lesson. What I notice, though, is that there is no W3C property (should be last in the list)

background-image: linear-gradient( ... );

[wesleyneal346]

So I added your suggestion to the code and it works (the last line takes effect), but it is till not excepted. I have learned a ton about background and background-image properties, and I respect codecadamy for telling me I’m wrong, I just wish I could move on to the next exercise, ya know?

[mtf]

I’ve been trying to get caught up to where you are, but ran into issues in the Fonts lesson. Need to try it in a different browser and see if I can’t catch up to where you are. There are known issues with this new track, but I am not aware of how many devices are affected.

[wesleyneal346]

Yeah I had Issues with that lesson, too. I also kept switching browsers and even left it for a day. It will accept entries inexplicably sometimes.

[mtf]

Switched to Chrome and I’m on the Maintainable Code lesson, now. Should catch up to you eventually.

[mtf]

It will accept entries inexplicably sometimes.

This is a problem that I believe the team are working on. I’ve got into the habit of refreshing the page after every Run. Eventually it gets sorted out.

[koa2003]

I changed browser from Mozilla Firefox 5.0 on Chromium version 37.0.2062.120 for Ubuntu 12.04 (281580) and I could make the Next step. I am working with Linux operational system Ubuntu 12.04. Right code for .btn selector:
background-image: -webkit-linear-gradient(#FFD194, #BC1324);