Exercise 3, "Position: Relative", Instruction 2—div.question


#1



To clear Instruction 1, I added the declaration position: relative; to .question.

Instruction 2 says:

Next, add 240 pixels on to the top of div.question (again, in style.css).


I've tried all of the following as solutions:

.question {
  margin: 120px auto;
  position: relative;
  top: 240px;
  text-align: center;
}

(^This pushes the questions down so the welcome banner is not covering them. Presumably, the purpose of adding the position declaration.)

div.question {
top: 240px;
}

div.question {
position: relative;
top: 240px;
}

Each one returns the following error:

Did you move add 240 pixels to the top of the div?

When I chose to Get Code, it adds the top: 240px; declaration to .question, but still returns the error.

I did check the other forum topics, and I did try resetting the course.

What am I missing?

Thanks!



#2

There is just the one selector rule for .question...

.question {
  margin: 120px auto;
  text-align: center;
  /*position: static;   old */
  position: relative;
  top: 240px;
}

Revert back to this, and Save. Then refresh, and Save again. Don't reset the lesson.


#3

Sorry, I'm not sure I understand:
By Save, do you mean click Run?
By "refresh", do you mean refresh my browser?

I tried interpreting your comment that way, but it didn't change anything. Still got the same error:

Did you move add 240 pixels to the top of the div?

Which doesn't even make sense. I think this is just a bug. Frustrating, because I can't complete the course without passing this lesson.


#4

My bad... Yes, that's what I meant.

Yes, that also.

Sadly, I'm out of suggestions. I completed that module many months ago and we have no way to test other people's code in the new interface (that I have learned of, yet). The other option is to try a different browser? Sorry I couldn't be more help.


#5

I am new to this course and the forums, this is my first post here actually.

I was looking for solutions to the problem @andrewpdillon has outlined above and was just about to add a new topic for this as I did not expect anyone else to have the same problem. But I found this and hope someone has a solution.

I too found that the Get Code option does this to the CSS code:

.question {
margin: 120px auto;
position: relative;
top: 240px;
text-align: center;
}

It still throws the error message.

Are those who have this problem missing something, or is it just a bug?

^YES!!!


#6

That's it! After I read this, I tried the same lesson in Chrome, and it worked!

Thanks!

Although I still think not everything's perfect here.

Here's why:

Exercise 2 requires the "position:" to be set as " static;"

So coming into Exercise 3, this is how it looks:

.question {
  margin: 120px auto;
  position: static;
  text-align: center;
}

Now instruction 1 of this exercise requires the "position:" to be set as " relative;", but the box beside that instruction was already checked when the exercise started. That was strange.

Should I report this as a bug so that this issue is fixed, and so that it works with Safari too?


#7

I'm pretty sure they have it reported in spades, by now. The extra checkmark may be left over from when you ran in the previous browser. There is an update issue that's pervaded throughout the new courses. Lesson steps are taken, but don't get updated to the workspace on Run. If this happens again, refresh immediately afterward and Run again. It should sort itself out.


#8

This is the first time i ran into this issue. Maybe i shouldn't be surprised if I encounter it again at some point then. Thanks for letting know and thanks for the advice! :slight_smile:


#9

Thanks, everyone! I was also on Safari, but I switched to Chrome and I was able to clear the exercise with no problems.


#10

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