Technical Doc Page < code > style problem

HTML-CSS
1

Hey guys, i’ve started the Technical Documentation Page project and i’m having some trouble when using the < code > tag; the code style will extend to the whole page overriding the style defined by body and do some other weird stuff. Can’t find where i’m wrong.

Right now i’m using a custom class for those codes called “dialog” insted of using code tag, but that’s not a solution i guess.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0.

Challenge: Build a Technical Documentation Page

Link to the challenge:

1 Like
2

A guess could be that you forgot a closing tag for <code> </code>, then it might want to take over the page…

Also, something you might want to take a look at is this:

To represent multiple lines of code, wrap the <code> element within a <pre> element. The <code> element by itself only represents a single phrase of code or line of code. Source

1 Like
3

You just edited while i was trying to copy the code you provided xD.

Not sure it’s a closing tag problem:

imagen
imagen1798×116 8.7 KB

For example, That code tag turned everything into monospace font.

This is the way i’m “solving” it.

imagen
imagen1833×120 12.8 KB

4

Yes, sorry about the example!

This is what I mean:


<pre>
<code>
//your code here
</code>
</pre>

The reason is that <code> is an inline element, and it’s recommended to wrap it in pre tags to get it going.

If you get another anomaly let me know…

1 Like
5

imagen
imagen1831×469 41.3 KB

It keeps destroying my other styles.

imagen

Seems to work fine in freecodecamp’s example somehow…

6

Does this look as expected?

Let me know if you see the same output than before, or what.

1 Like
7

It looks fine actually,

I’ve rewritted every < code > tag and now it’s seems to work; as you said, it was probably an open tag thing (feeling like an idiot right now :/)

Thanks for your time pal !!!

8

You’re welcome, feel free to send me a message anytime you have an issue. Good luck.

1 Like