Forms 2.0 Custom CSS for left adjusting check box

[Megan_Reed1]

I have a 2.0 form where I'd like to add a check box for people to request more information. The CSS of the landing page is controlling if the field is above or to the left of the field.

Here's the landing page: Go with the Pro http://offers.netgainit.com/GoWithThePro.html

This is what the form looks like currently:

Here's what I'd like the form to look like (with a bit more space between the email address field and the check box/text):

Any CSS gurus that can help?

[SanfordWhiteman · Accepted solution]

.mktoForm LABEL[for="ContactSales"]  {

     float: right !important;

     width: 210px !important;

}

.mktoForm INPUT#ContactSales {

     margin-top: 2px;

}

But realize that once you're refloating stuff like this, later changes to the form (if any) will also be affected.

It can be better to remove all styles from the form and then style it more by hand. Although admittedly this form is very simple, so probably not worth the hassle.

[Megan_Reed1]

Thank you Sanford. This worked beautifully. The margin between the email input and the check box is still pretty small and I tried increasing the margin-top number to 10px, but it didn't seem to make a difference.

Either way, this will work better than before.

Thank you!

[SanfordWhiteman]

The margin-top is for the checkbox relative to its container.  If you wanted the whole row to move down you'd apply margin to the row:

.mktoFormRow:nth-of-type(2) {

    margin-top: 4px;

}

[Megan_Reed1]

That worked! Thank you.

[Megan_Reed1]

Well after testing through 3 browsers, it looks great in Chrome and IE. Firefox also adds margin below the header too. Any thoughts as to why?

[SanfordWhiteman]

Remove the .nth-of-type rule and try:

.mktoForm LABEL[for="ContactSales"]  {

     float: right !important;

     width: 210px !important;

     margin-top: 6px;

}

.mktoForm INPUT#ContactSales {

     margin-top: 8px;

}