[SOLVED] Form Builder -- Need help getting form lined up

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
nmorgan
Forum Members
Forum Members
Posts: 37
Joined: Fri Oct 03, 2008 11:21 pm

[SOLVED] Form Builder -- Need help getting form lined up

Post by nmorgan »

Hi CMSMS ers:

I can't figure out what I'm doing wrong.

Here's my form:
http://gator1064.hostgator.com/~jsi1234 ... contact-us

Here's the attached default css with my edits included so far:

/* Sample FormBuilder CSS base */
form {margin-top:0}
form, td, th, li { font-size: 100%}
form div {margin-bottom:0}
fieldset div {
margin-bottom:0.5em;
margin-left:1em;
}
fieldset div div {
margin-top:0.5em;
margin-left:1em
}
fieldset {

     margin-bottom:1em;
border:1px solid #999;
padding:0.5em
}
fieldset label {
width: 150px;
      float: left;
   
}
legend {
color:#000;
background:#fff;
font-style:regular;
font-size:1.2em;
margin-bottom:0.5em;
padding:0.2em;
width:auto;
border:1px solid #fff
}
textarea {
margin: 0.5em 0;
width:98%;
height: 6em
}

/* Apply this class to text/select input fields with shorter labels
to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}

/* Pretty up your Captcha image output */
.captcha {
margin:0.5em 0;
width:200px;
text-align:center
}
.captcha img {border:1px solid #333; margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em}

/* Just a bit more room for the Submit button */
.submit {margin-top:0.5em}

.contactform input {border: 1px solid #333;}
.contactform input.checkbox {border: none;}
.contactform label {
display: block;
float: left;
width: 150px;
}
.contactform label.label {
display: inline;
float: none;
width: 50px;
font-size: 10px;
}
.contactform textarea {
background-color: #eee;
border: 1px solid #999;
}
.formbuilderform .message {
line-height: 16px;
padding: 0 0 8px 0;
}


Any help greatly appreciated. - nm
Last edited by Anonymous on Fri Dec 04, 2009 11:55 am, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Form Builder -- Need help getting form lined up

Post by Dr.CSS »

The 'Your Email Address' text is longer than 150px try 170px, how do I know, I use Firefox with the Web Dev. tool bar addon and it has edit css which I used to change it to 170px and it all lined up...
nmorgan
Forum Members
Forum Members
Posts: 37
Joined: Fri Oct 03, 2008 11:21 pm

Re: Form Builder -- Need help getting form lined up

Post by nmorgan »

Dr. CSS:  Thank you for the tip.  Your are indeed the Dr.  Also thanks for telling me how. Give a man a fish and he can eat for a day.  Teach a man to fish and he can eat for a lifetime. -- Thanks, Nancy
Post Reply

Return to “Layout and Design (CSS & HTML)”