Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Form Basics The Button Element

Dean Onizuka
Dean Onizuka
4,753 Points
Posted by Dean Onizuka
Dean Onizuka
4,753 Points

using same exact code but it isnt coming out the same on my browser

followed this lesson step by step but when my code is previewed the button layout does not look the same. it is basically vertical instead of horizontal and i dont know why its doing that. When the exact same code is copy pasted in workspaces it works exactly how it looks in the video tutorial. i'll post my code below. any ideas guys?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>

     <form action="index.html" method="post">

     <h1>Sign Up! </h1>

     <input type="text" id="name" name="user_name">
     <input type="email" id="mail" name="user_email">
     <input type="password" id="password" name="user_password">

     <textarea id="bio" name="user_bio"></textarea>

     <button type="submit">Sign Up</button>

     </form> 

    </body>
</html>
Dean Onizuka
Dean Onizuka
4,753 Points
Dean Onizuka
Dean Onizuka
4,753 Points

wow. now its showing. special mod powers i guess lol

3 Answers

myackley35
myackley35
34,574 Points
myackley35
myackley35
34,574 Points

Hi Dean!

Are you including the <html> and <head> information in your original code? Like this:

<!DOCTYPE html>
<html>

<head>
<!-- title, meta information, links to styles -->
</head>

<body>
<!-- your form code -->
</body>

</html>

Browsers tend to render code in odd ways when tags are left out, etc.

I hope this helps you out!

Dean Onizuka
Dean Onizuka
4,753 Points
Dean Onizuka
Dean Onizuka
4,753 Points

i had all the other relevant info. its verbatim from what the tutorial shows and when i post it into workspaces it works. but with notepad++ it comes out weird.

Dean Onizuka
Dean Onizuka
4,753 Points
Dean Onizuka
Dean Onizuka
4,753 Points

i had all the other relevant info. its verbatim from what the tutorial shows and when i post it into workspaces it works. but with notepad++ it comes out weird.

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Dean;

Do you have any links to stylesheets in the code you are using? I don't see any in the code you posted, that might explain the style differences. Do you have the stylesheets saved locally if that is where the issue is?

Ken

Dean Onizuka
Dean Onizuka
4,753 Points
Dean Onizuka
Dean Onizuka
4,753 Points

yes i did. for some odd reason when i copy paste my code from notepad++ to here it left out the stylesheets and the meta tags etc.