Why does the code not work if there is a space between the "=" sign?

Question

I was stuck on this challenge for a while and then realized it was correct when I deleted the space between the "=" sign in title="avatar" (rather than title = "avatar)

style.css

/* Complete the challenge by writing CSS below */
img[title="avatar"] {
  border-radius: 50%;
}

input[type="password"] {
  color: #ccc;
}

input[type

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <form class="form-contact">
        <img src="avatar.png" title="avatar" alt="user">

          <label for="un">Username:</label> 
          <input type="text" id="un">

        <label for="pw">Password:</label>
            <input type="password" id="pw">

          <input type="submit" value="Sign up">
            <input type="reset" value="Reset">
        </form>
    </div>
</body>
</html>

Answer 1 · 2021-11-04T22:19:26Z

November 4, 2021 10:19pm

To be clear, the code works with a space. You can verify this with the Preview button and see that the image is round. The problem is that whoever wrote the test case for checking the solution did not put in conditions to allow for spaces, so it is checking for the word title followed directly by an = followed directly by "avatar" or 'avatar'. It's one of the problems with writing tests, in that the program is only going to test the conditions that are entered.

Welcome to the Treehouse Community

Looking to learn something new?

Russ Tuttle

Russ Tuttle

Why does the code not work if there is a space between the "=" sign?

1 Answer

Jason Larson

Jason Larson