Can't find error in .silver-background class

HTML-CSS
1

I am getting the following results:
PASS: Your div element should have the class silver-background .
FAIL: Your div element should have a silver background.
PASS: A class named silver-background should be defined within the style element and the value of silver should be assigned to the background-color property.

The hint in the test run area says:

// running tests
Your div element should have a silver background.
// tests completed

I’ve read several other similar posts and have been able to find the syntax/spelling errors in all of them … but I can’t find it in my own. I’ve even popped the code into Visual Studio Code and no errors are found.

What can’t I see?

  **Your code so far**


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
  color: red;
}

h2 {
  font-family: Lobster, monospace;
}

p {
  font-size: 16px;
  font-family: monospace;
}

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;
}

.smaller-image {
  width: 100px;
}

.silver-background {
  background-color: silver;
}

</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<div class="silver-background">
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:94.0) Gecko/20100101 Firefox/94.0

Challenge: Give a Background Color to a div Element

Link to the challenge:

2

Hi there! I’ve tested your code a few times and it’s working perfectly fine on my browser. It could be just a bug, maybe try to reset the challenge and do a hard refresh (Shift + F5).

3

The code you have shared works on my end. Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Dark Mode and Ad Blocker), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

Seeing as this is a color challenge and the only test that is failing for you is the one where the test looks at the color on the element, makes it fairly likely that it’s something like a dark mode extension that is causing the test to fail.

4

Thanks, @cazcake and @lasjorg . I don’t have a dark mode extension but I will disable what I do have and figure it out. At least I wasn’t missing something in the code!

5

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