I swear thats a sliver background

Tell us what’s happening:
Describe your issue in detail here.

   **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://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>
   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36.

Challenge: Give a Background Color to a div Element

Link to the challenge:

 <div> 
   <div class="silver-background">

You’ve added an extra div here. They didn’t want you to do that, just to add the class to the existing div. When I fix that, the code passes.

i removed the extra div and it stopped working

You still need a div, there was one originally. If I remove the extra div (leaving the one with the class) then the code passes for me. Literally all I had to do was delete one line.

When I remove the top div it works for me.

Did you accidently remove the wrong div?

ive realised i did remove the wrong one, but it also still doesnt work it says i need a silver background but it is

  1. Please show us your current code.
  2. Do you have dark mode on? That can sometimes screw up CSS color tests.
<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>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Is that all of your code? Where is the style section?

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

When I plug in the code you just showed me to the rest of the app (with the proper class definition), it passes for me. But I’d have to see all your code to be sure.

That code passes for me.

If it doesn’t pass for you, make sure dark mode is turned off.

If that doesn’t work, sometimes these things “glitch”. Turn your computer off and on again. Clear the browser cache. Try a different browser. If all else fails, just back out of this challenge and more on to the next.

thank you for the help

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