.thick-green-border error

Tell us what’s happening:

The task is to add the “.thick-green-border” class to the image. I did this correctly, with the image appearing 10px, green, and very thick.

The last check mark says “The border around your element should be green.” Although the image border is green…it will not allow me to pass the task. I have also tried many variations of the class, with no luck in passing either.

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

.smaller-image {
  width: 100px;
}
.thick-green-border {
  border-width: 10px;
  border-style: solid;
  border-color: green;
}
</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>
  <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>

Your browser information:

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

Challenge: Add Borders Around Your Elements

Link to the challenge:

The code is code. Can you try using another browser? Sometimes the browsers you’re using can make the tests fail despite the code being correct. Trying using Chrome with no extensions.

1 Like

Hey John, i’m currently using chrome at the moment…but I am on wifi.

I can try using IE or another browser, i’ll give an update on the results

*Update:

Used IE and Edge, still the same issue

Are you running a dark mode extension? If so, disable it. They can interfere with the tests.

1 Like

I am actually, i’ll disable it and see if that changes the results in the morning

  • Your code works fine for me. It seems like the problem might be your browser’s extensions that have access to the FCC site.
    Try disabling some extensions. If the problem still persists, you can try to use a different browser.
  • I also see that your running on Chrome 81, try updating to Chrome 83, the newest version and check if that works.
1 Like

Disable any “dark mode” extension on your browser. That should do it.

1 Like

UPDATE

Disabling Dark Reader worked. I was using it to cut down on the brightness of the sight

1 Like

Hey @FuzyWazaBear,

1 Like

Hey thank you! I didn’t see it