Building a set of colored markers - step 49

HTML-CSS
1

Tell us what’s happening:

Update:

After typing out the whole sad tale, it turns out there is a bug on step-49 that only affects the Safari browser. After beating my head against the wall for some time, in frustration I pasted the URL into a Brave browser window and suddenly my ‘error’ was gone. Sigh. Read on for details.

The instructions, although introducing `linear-gradient` simply say to:

change the background-color property to background .

So, I’ve changed the relevant section to:

.red {
  background: rgb(255,0,0);
}

I then click ‘check your code so far’ and am getting an error along with a hint saying:

Hint:
Your .red CSS rule should have a background property with the value rgb(255, 0, 0).

right?!? as in, exactly what I’ve entered. I’ve tried:

  • copying and pasting the value from elsewhere
  • reverting to background-color
  • locating another css color tutorial, copying & pasting the function, then changing the rgb value.

Nothing changes the test failure. I believe fat-fingering it has been ruled out and I’m not able to continue although it appears i’ve got the correct code in place.

halp!
(see update above).

Your code so far

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colored Markers</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>CSS Color Markers</h1>
  <div class="container">
    <div class="marker red">
    </div>
    <div class="marker green">
    </div>
    <div class="marker blue">
    </div>
  </div>
</body>
</html>

/* file: styles.css */
h1 {
text-align: center;
}

.container {
background-color: rgb(255, 255, 255);
padding: 10px 0;
}

.marker {
width: 200px;
height: 25px;
margin: 10px auto;
}

.red {
background: rgb(255, 0, 0);
}

.green {
background-color: #007F00;
}

.blue {
background-color: hsl(240, 100%, 50%);
}


  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Challenge: Step 49

Link to the challenge:

2

Ya, I think you are right, it is a problem with Safari. I think there are other steps that have Safari problems as well. My suggestion would be to use another browser. Also, you can move ahead to the next step without passing the current one. It won’t keep you from getting the certification if that’s something you are going for.

1 Like
3

yup. the only issue i’m having now is that the dark reader extension is making the colors near impossible to differentiate. i’m now bouncing between the browsers, whee!

4

Ahh, if you have a dark mode extension active in your browser then any tests that are testing for color are going to fail, no matter which browser you are using. So maybe this isn’t a Safari issue and just a dark mode extension issue? Regardless, you definitely need to turn off any extensions that change the colors on the page if you want to pass steps that deal with color.

5

Only Brave, the ‘working’ browser has the dark reader extension, my Safari is as vanilla as they come.

However when it comes to the ‘final’ examples for the certification, if I need to use Brave, I’ll disable it for sure, thanks for the tip!

6

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