Create a Horizontal Line Using the hr Element----- help

HTML-CSS
1

Tell us what’s happening:
this is my code so far and the other challenge is saying the hr tag should come between the title and paragraph, what do i do

Your code so far


<style>
  h4 {
    text-align: center;
    height: 25px;
    
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
<h4><s>Google</s>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element/

2

I’m having the same issue, the challenge must be broken.

1 Like
3

Yes, it is, skip it for now until a fix gets put in

1 Like
4

@feyyi_e @saint-rayray Hey guys, had the same issue, seems to be bug. For more information on how to bypass this with the ‘green tick’, see here Trouble with “Create a Horizontal Line Using the hr Element” lesson

2 Likes
5

That workaround is invalid HTML. You should never write HTML like that.

6

I recommend what @DanCouper just told you. Skip the challenge for now. There is already a 2 months old fix for this bug at the Github repo but, due to some issues, the server is still running an old version, so I’m sure it will be fixed soon.

If you want to see all the checkmarks in your curriculum just now and you have a clear understanding that the hack is just a hack and you should never do it in “real code”, I don’t think that’s so bad… Hehe

1 Like
7

it has a solution.
move the<em> tag outside the<p> tag.
like insted of : <p><em> </em></p>
do this: <em><p></p></em>

1 Like
8

That is invalid HTML. It is a second bug in the test that that code is allowed to pass.

9

The problem is that it isn’t being made clear it’s invalid HTML and shouldn’t be used in real code. The vast majority of posts are not pointing that out, and I didn’t see anyone else pointing it out before I started doing so (though appreciate I haven’t read every post so may have missed some).

10

Yep, absolutely right. I understand people wanting to have all their curriculum checkmarked (I’m one of those) but I think understanding it’s just a hack and what is the hack for is a must.

I don’t particularly see anything wrong on using hacks to solve issues with tests. Actually I learnt a few things while reading code to solve some issues, but always understanding the way to do it right.

11

you mean in HTML you cannot place a paragraph tag inside the em one?

14

You cannot nest a block-level element (like a p tag) within an in-line element (like an em tag).

If you don’t want to take my word for it, the image shows a simple HTML page with a p tag nested within an em tag, which I’ve run through a HTML validator. You can check yourself at https://validator.w3.org if you want to. (Note there was a closing </html> tag at the end which you can’t see.)

image
image1536×2048 339 KB

15

done already thamks.

16

Thanks!
i followed what you suggested and it worked.

1 Like