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

CSS

Posted by Tata Cheng
Tata Cheng
8,787 Points

Contact form - Smells like Bakin'

I'm doing the 2nd stage of Build an Interactive Website - Text Input Events. However, when I open contact html in my browser (Firefox) the text fields are on the same level as the labels, unlike in the video where it is on a separate line.

How do I fix that?

3 Answers

Tata Cheng
Tata Cheng
8,787 Points

Hey guys, I figured it out after quite a bit of trial and error.

I had to change (looking at Moiz's code above):

        label, input, textarea {
        float: left;
        clear: left;
        }

And I had to float the span tag on its own because after I changed the above code the span tags went on their own line too.

        #form span {
        float: left;
        border-radius: 20px;
        margin-left: 15px;
        padding: 8px 35px;
        background: #faf3bc;
        color: #420600;

Not sure why that happened to me...

Thanks for trying to help!

Robin Zhao
Robin Zhao
3,039 Points
Robin Zhao
Robin Zhao
3,039 Points

Hi Tata,

perhaps you can try adding a <br> tag after the input tag?

Moiz Malik
Moiz Malik
11,906 Points
Moiz Malik
Moiz Malik
11,906 Points

It would be helpful if you could post an example of what you have so far.

Without that, I'm assuming it could be a couple things.

Do you have label tags around your labels? Following how they have setup the form in HTML is necessary. <label> tags are necessary.

If so, the the other thing could be that you didn't include the necessary contact form specific CSS. Looking at that stage in CodePen, you would need this CSS associated with your form:

/*Contact Form*/

.btn-submit {
    width: 150px;
    float: left;
    margin: 2% 0;
    border: 0;
    padding: 10px 25px;
    color: #faf3bc;
    font-size: .75em;
    background-color: #4fb69f;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    text-transform: uppercase;
}

label, input, textarea, span {
    float: left;
}

label {
    width: 100%%;
    margin: 1% 0;
}

input[type=text], textarea {
    width: 60%;
    background-color: #2a0400;
    color: #faf3bc;
}

input, textarea {
    padding: 1%;
    border: 0;
    border-radius: 15px;
}

input:focus, textarea:focus {
    outline: none;
    border: 0;
}

.required {
}

textarea {
    height: 150px;
}

p {
    clear: both;
    min-height: 25px;
}

#form span {
    border-radius: 20px;
    margin-left: 15px;
    padding: 8px 35px;
    background: #faf3bc;
    color: #420600;
}

#form span.valid {
    background-color: #c0ce51;
    color: #faf3bc;
}

#form span.error {
    background-color: #b0240f;
    color: #faf3bc;
}