Why does this not count for a background?

HTML-CSS
#1

In Basic CSS: Give a Background Color to a div Element it says to add a silver background to a div element. I thought I did but I can’t move on, saying Your div element should have a silver background.

The stuff I have (and think is relevant):

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

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

image

It looks like it has a silver background, so I don’t know what to fix since the other two criteria are checked: Your div element should have the class silver-background.
and 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 problem persists when I redo it with Reset All Code

#2

Hi,

your code looks fine but if you share your whole code then I can tell you better.
Sometimes typos also give hard time.

hope this helps,
Abhishek

1 Like
#3

As just a full code block?

<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="/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>

What the page looks like:

image
image489×532 35.5 KB

#4

Everything is fine and i copy your code to actual challenge and it passed.
So your code is ok.

try opening an incognito window and open the challenge there to see if it pass yours too.

1 Like
#5

Thank you very much for the help. I still don’t really understand what happened but I’m glad I can continue.

#6

Happy Coding !

Regards,
Abhishek

1 Like