Give a Background Color to a div Element - NO JOY

Good afternoon,

I have checked all the answers and Ask Help and still cannot work out why the test won’t pass for giving the div a background color of silver. 2 out of 3 tests pass except for ““Your div element should have a silver background””…

<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://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <div>
  <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>

The issue is with div class=“silver-background” and the styling of the class .silver-background.

In the demonstration window, the div does have a silver background so I don’t understand why it won’t pass the test.
"


Thanks

You have 2 opening div containers and only 1 closing div container.

I think it’s because you have an open <div> that wasn’t closed before opening div.silver-background.

Try deleting that div and see what happens.

Thanks for the response.

Even reading the other solutions in Ask Help don’t really spell out what the answer is. The instructions say to put the class within the div which I thought meant that you still needed the other div to keep the list. It doesn’t.

Thanks for your help. That was a lot of frustration for what turned out to be a straight forward solution :grinning:

1 Like