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

<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; } ```

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")

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;
}

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( ... );

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?

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.

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.

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

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.

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);

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.