Styling form Options

[fionas17]

Hello,

I'm almost done with my basic webpage for a project I am working on. I have to build a simple contact form. For some reason my form keeps looking weird now with white boxes appearing. I'm so confused. Any help would be much appreciated.

Also, anytime i try to change the height of the boxes the page becomes distorted

What it is supposed to look like:

http://s328.photobucket.com/user/fijiholic...3o2nor.png.html


What mine looks like?

http://s328.photobucket.com/user/fijiholic...fkbtdy.png.html

HTML:

<div class="content">


<form action="MAILTO:mystery@wow.com" method="post" enctype="text/plain">

<div id="center">

<div class="entry">
<label for="firstname">FIRST NAME</label>
<input type="text" name="firstname">
<br>
</div>

<div class="entry">
<label for="surname">LAST NAME</label>
<input type="text" name="surname">
<br>
</div>

<div class="entry">
<label for="mobile">EMAIL</label>
<input type="text" name="mobile">
<br>
</div>

<div class="entry">
<label for="home">PHONE #</label>
<input type="text" name="home">
<br>
</div>

<div class="entry">
<label for="work">TWITTER</label>
<input type="text" name="work">
<br>
</div>

<br class="clear">
</div>
</br>
</br>

<center><h2>HOW WOULD YOU LIKE TO BE REMINDED OF THE EVENT?</h2></center>
</br>

<center>
<div id="contact">
<label>
<input type="checkbox" name="text" value="text"> TEXT</label>
<label>
<input type="checkbox" name="email" value="mail"> EMAIL</label>
<label>
<input type="checkbox" name="twitter" value="twitter"> TWITTER</label>

</div>
</center>
</br>

<center>
<div id="submit">

<br>
<input type="submit" class="floatright" value="SUBMIT">
</div>

</center>

</form>



CSS:

.content
{ padding:20px; background-color: black; color:inherit; text-align:justify;}

.footer
{ float:right; }

.spacer
{ clear:both; margin:15px;}


.entry{
background-color: #231F20;
margin-top: 10px;

label {
width: 121.327px;
height: 25.905px;
float: left;
margin-top: 0.8em;
margin-right: 0.9em;
display: block;
}

#contact label {
float: center;
width: 10em;
margin: 80px;
text-align: center;
}

#submit {
align: center;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
width: 30%;
display: block;
}

form {
float: center;
}

input {
border: 0;
background: #363c42;
padding: 15px 0px 15px 15px
}

input[type='text'] {
width: 80%;
margin-left: 20px;
}

input[type="submit"]{
padding: 15px;
}

[pandy]

Off to the CSS checker you go.

https://jigsaw.w3.org/css-validator/

You have left a } out in the .entry rule. Basically the style sheet isn't read after that. Once you correct that validate again. Other errors will show up. There is no such thing as float: center and align is a HTML attribute, not a CSS property.

It may also be a good idea to give the label text a light color...