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

#1


https://www.codecademy.com/courses/learn-html-css/lessons/adding-images/exercises/background-color


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

#2

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

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

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

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?

#7

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.

#8

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.

#9

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

#11

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.

#12

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

#13

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