Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Preformatted text indentation

I am having a formatting issue during the Preformatted Text lesson. I have double checked my code and even tried both Sublime and Notepad++ but cannot figure out what I am doing wrong.
About halfway through, when I refresh my browser (IE), Everything inside the <pre> tags is indented way more than what is shown in the lesson video. His is indented 3 spaces, mine is indented 18. I am confused and have even retyped it twice. Here is my code;

<!DOCTYPE html>

<html lang-"en"> <head> <meta charset="utf-8"> <title>My Page</title> </head>

<body>

<p> When we use the <code>drive()</code> function on the <code>vehicle</code> object, it moves forward.</p>

<pre>
    Here is some text.

    It is...
                    preformatted!
</pre>

<pre><code>
    if (!foo) {
        then bar = 3;
    }
</code></pre>

</body>

</html>

Sorry, I ctrl-v'd that incorrectly.

7 Answers

Well you got me playing around with it and I figured out a solution. First I did what you suggested and it moved everything over to the left margin. I started thinking that since this is a markup language which is mostly all about formatting that there had to someway to make it work. It turns out that if I use the same indentation in my code, but use the spacebar INSTEAD of the tab key to indent the lines, it works fine. Go figure.

Hmm that's weird, I've always thought pressing tab was basically just the equivalent of typing 4 spaces?

Another thing you could try would be to add margin-left to the the pre element with css. So that it moves all the content within pre tags further in the page.

pre {
  margin-left: 50px;
}

Glad you got it working anyway :)

Hi, have you tried adding a blank line before and after the 3 backticks? That seems to get the code to show properly for me.

What version of IE are you using? I've viewed your code (what I can see of it) in IE 10 and the formatting appears to be the same as in other browsers.

Have you ran your code through a validator to check if there are any errors that could be causing this issue?

It would help to see the full code. If you're still having trouble getting it to show properly try uploading your site to codepen so we can see whats going on.

Just some ideas, hope it helps!

I'll try again.

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Page</title>
</head>

<body>

    <p> When we use the <code>drive()</code> function on the <code>vehicle</code> object, it moves forward.</p>

    <pre>
        Here is some text.

        It is...
                        preformatted!
    </pre>

    <pre><code>
        if (!foo) {
            then bar = 3;
        }
    </code></pre>

    <p>
        This is first line of the poem.<br>
        This is the second line of the poem.
    </p>



</body>

</html>

Hope this works.

<p data-height="268" data-theme-id="0" data-slug-hash="usyxw" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/bsmith9510/pen/usyxw'>usyxw</a> by Bryan Smith (<a href='http://codepen.io/bsmith9510'>@bsmith9510</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//codepen.io/assets/embed/ei.js"></script>

I think the issue is with the way you are indenting your code.

By indenting code in between pre tags you are adding extra whitespace. If you remove this indentation so everything inside pre sits flush on the left side of the screen, except for the parts you want indented, does that help?. So the full code would look like:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Page</title>
</head>

<body>
<p> When we use the <code>drive()</code> function on the <code>vehicle</code> object, it moves forward.</p>

<pre>
Here is some text.

It is...
        preformatted!
</pre>

<pre>
<code>
if (!foo) {
  then bar = 3;
}
</code>
</pre>

</body>
</html>

Normally when you add whitespace in a html or css file it is ignored. But with the pre tag any spaces are taken into account.

Hope this helps!

Think I got it. Was stuck on your statement about pressing tab basically being just the equivalent of typing 4 spaces, and it should be, unless you click the spaces:4 down in the lower right of Sublime text. When you do a menu pops up and you can change it to equal whatever you want.

I am doing the PHP track and in the first section there was a stage about text editors and we changed the tab/spacing to 2. We also clicked on Indent Using Spaces. I figure that if I didn't check this the last time, and it messed things up somehow. Also whenever something was copy/pasted it followed right along. What it would have indented with I have no idea, but since the button is there it makes me wonder.

I just retyped my current lesson with the settings set and now it comes out just fine.

Thank you James for getting me to think about it from a different angle.

Ah that makes sense. I've definitely learnt a few things and its been fun so thank you as well :)