I am using a contact form so users can send inquries, testimonials, etc... my site is done with PHP includes.

For some reason I can't get this to look right, can somebody write out something for me to have the text boxes align right? I'd be forever greatful, I've been trying to fix this for days.

http://www.bkriegtech.net/?page=contact

Here is a quick and dirty way to do it. Place this into your CSS file:

 .mainForm label { display: block; width: 11em; float: left; clear: both; }

Here you go:

<table width="60%" cellpadding="0" cellspacing="1">
        <form method=post enctype=multipart/form-data action=form/processor.php onSubmit="return validatePage1();">

   <tr>
                    <td><label class="formFieldQuestion">Full Name: </label></td><td><input class=mainForm type=text name=field_1 id=field_1 size='35' value=''></td>
                    </tr>

                    <tr><td><label class="formFieldQuestion">E-Mail Address: </label></td><td><input class=mainForm type=text name=field_2 id=field_2 size='35' value=''></td></tr>

                <tr>
                    <td><label class="formFieldQuestion">Username: </label></td><td><input class=mainForm type=text name=field_3 id=field_3 size='35' value=''></td></tr>
                    <tr><td><label class="formFieldQuestion">Domain Name: </label></td><td><input class=mainForm type=text name=field_4 id=field_4 size='35' value=''></td></tr>
                    <tr><td><label class="formFieldQuestion">Problem: </label></td><td><select class=mainForm name=field_5 id=field_5><option value=''></option><option value="Low">Low</option><option value="Medium">Medium</option><option value="High">High</option><option value="Emergency">Emergency</option><option value="Critical">Critical</option></select></td></tr>
                    <tr>
                    <td><label class="formFieldQuestion">Message: </label></td><td><textarea class=mainForm  name=field_6 id=field_6 rows=10 cols=35></textarea></td></tr>
</form>
</table>

Hope this helps!

Not a TABLE!!!!!


float the label left,
float the input right.
clear:right on the input.

Sweet!!! It's weird though, now, each input box has a bullet lol. What is the cause of that? Theres no li anywhere

Actually, there are several <li>s, all with a class called .mainForm.

How do I remove that? It's already classed out and everything.

add "list-style:none;" to your .mainForm

didn't change anything.

Right now, you have this:

.mainForm label { display: block; width: 11em; float: left; clear: both; list-style: none; }

ADD this:

.mainForm {list-style:none;}

So, all together, you would have this:

.mainForm label { display: block; width: 11em; float: left; clear: both; list-style: none; }
.mainForm {list-style:none;}

Right now, you are just putting "list-style:none" on any labels inside .mainForm. You need to put the style on the "<li>", not the label. In fact, you should be able to remove "list-style:none" from ".mainForm label"

#mainForm_1 {
list-style-type:none;
}

That worked, sorry. Misread what you wrote.

Actually, now, the bullets on my navigation menu are gone, with the exception of the testimonials link for some reason.


Is this just all or none?

It depends on how specific you get. If you put the "list-style:none" on just the .mainForm class, then only list items with a class of mainForm will not have a bullet.