Hi everyone,
I have a form that’s being contained by a parent element as follows:
<div class="columns large-8 clearfix" style="background-color: #e4dab8;">
<div style="clear: both;"></div>
<div class="signup form">
The form itself and the first field set within the form have a position of relative, then the other fields are positioned absolutely relative to the first field set.
I was having trouble containing the form within the parent element so I added in an empty div and set it to clear:both. This worked for the first field set but not for the other field sets within the form. I have some jQuery on the form so that I can page through the field sets so I don’t know whether this is contributing to the problem.
I wondered if someone could shed some light on this problem. The html and css is below.
Thanks so much in advance.
#msform {
width: 550px;
margin: 10px auto;
text-align: center;
position: relative;
padding:0 0 20px;
}
#msform label{
display:block;
text-align:left!important;
margin-top: 15px;
}
#msform label + br{display:none}
#msform fieldset.first {
position:relative;
}
/*.columns.large-8{
height:auto!important;
}
*/
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 20px 5px;
box-sizing: border-box;
width: 90%;
margin: 0 5%;
/*stacking fieldsets above each other*/
position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
<div class="columns large-8 clearfix" style="background-color: #e4dab8;">
<div style="clear: both;"></div>
<div class="signup form">
<h4 style="text-align: center; color: white;">Application Form</h4>
<form id="msform" name="catwebformform54637" method="post" onsubmit="return checkWholeForm54637(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=70776&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}">
<p style="text-align: left;"> <span class="req">*</span> Required</p>
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Account Setup </li>
<li> Personal Details </li>
<li> Home Address </li>
<li> Work Address </li>
<li> PO Box Address </li>
<li> DX Address </li>
<li> Billing Address </li>
<li> Payment Details </li>
</ul>
<fieldset class="sec first">
<legend class="fs-title">Account Setup</legend>
<label for="EmailAddress">Email Address <span class="req">*</span></label>
<input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" placeholder="Email" maxlength="255" /> </td>
</label>
<label for="Password">Password <span class="req">*</span></label>
<input type="password" name="Password" id="Password" class="cat_textbox" maxlength="255" autocomplete="off" /></label>
<label for="PasswordConfirm">Confirm Password <span class="req">*</span></label>
<input type="password" name="PasswordConfirm" id="PasswordConfirm" class="cat_textbox" maxlength="255" autocomplete="off" />
</label><br />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">Personal Details</legend>
<label for="Title">Title
<select name="Title" id="Title" class="cat_dropdown_smaller">
<option value="913142">Dr</option>
<option value="913141">Miss</option>
<option value="913138" selected="selected">Mr</option>
<option value="913139">Mrs</option>
<option value="913140">Ms</option>
</select>
</label>
<label for="FirstName">First Name <span class="req">*</span>
<input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" /> </label>
<label for="CAT_Custom_329121_128444">Middle Name
<input type="text" maxlength="4000" name="CAT_Custom_329121_128444" id="CAT_Custom_329121_128444" class="cat_textbox" /></label>
<label for="LastName">Last Name <span class="req">*</span>
<input type="text" name="LastName" id="LastName" class="cat_textbox" maxlength="255" /> </label>
<label for="CAT_Custom_329249_128500">Profession
<input type="text" maxlength="4000" name="CAT_Custom_329249_128500" id="CAT_Custom_329249_128500" class="cat_textbox" /></label
><br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">Home Address </legend>
<label for="HomeAddress">Home Address
<input type="text" name="HomeAddress" id="HomeAddress" class="cat_textbox" maxlength="500" /></label>
<label for="CAT_Custom_329119_128443">Home Address2
<input type="text" maxlength="4000" name="CAT_Custom_329119_128443" id="CAT_Custom_329119_128443" class="cat_textbox" /></label>
<label for="HomeCity">City <span class="req">*</span>
<input type="text" name="HomeCity" id="HomeCity" class="cat_textbox" maxlength="255" /></label>
<label for="HomeState">State <span class="req">*</span>
<input type="text" name="HomeState" id="HomeState" class="cat_textbox" maxlength="255" /></label>
<label for="HomeZip">Zipcode/Postcode <span class="req">*</span>
<input type="text" name="HomeZip" id="HomeZip" class="cat_textbox" maxlength="255" /></label>
<label for="HomeCountry">Country <span class="req">*</span>
<select name="HomeCountry" id="HomeCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AF">AFGHANISTAN</option>
<option value="AX">ALAND ISLANDS</option>
<option value="AL">ALBANIA</option>
<option value="DZ">ALGERIA</option>
</select></label>
<label for="HomePhone">Home Phone Number
<input type="text" name="HomePhone" id="HomePhone" class="cat_textbox" maxlength="255" /></label>
<br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">Work Address <span class="req">*</span></legend>
<label for="Company">Company Name
<input type="text" name="Company" id="Company" class="cat_textbox" maxlength="255" /></label>
<label for="WorkPhone">Work Phone Number
<input type="text" name="WorkPhone" id="WorkPhone" class="cat_textbox" maxlength="255" />
</label>
<label for="CAT_Custom_329240_128496">Work Phone Number2
<input type="text" maxlength="4000" name="CAT_Custom_329240_128496" id="CAT_Custom_329240_128496" class="cat_textbox" />
</label>
<label for="CellPhone">Mobile Phone Number <span class="req">*</span>
<input type="text" name="CellPhone" id="CellPhone" class="cat_textbox" maxlength="255" />
</label>
<label for="WorkAddress">Work Address <span class="req">*</span>
<input type="text" name="WorkAddress" id="WorkAddress" class="cat_textbox" maxlength="500" />
</label>
<label for="CAT_Custom_329241_128497">Work Address2
<input type="text" maxlength="4000" name="CAT_Custom_329241_128497" id="CAT_Custom_329241_128497" class="cat_textbox" />
</label>
<label for="WorkCity">Suburb <span class="req">*</span>
<input type="text" name="WorkCity" id="WorkCity" class="cat_textbox" maxlength="255" />
</label>
<label for="WorkState">State <span class="req">*</span>
<input type="text" name="WorkState" id="WorkState" class="cat_textbox" maxlength="255" />
</label>
<label for="WorkZip">Zipcode/Postcode <span class="req">*</span>
<input type="text" name="WorkZip" id="WorkZip" class="cat_textbox" maxlength="255" />
</label>
<label for="WorkCountry">Country <span class="req">*</span>
<select name="WorkCountry" id="WorkCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AF">AFGHANISTAN</option>
<option value="AX">ALAND ISLANDS</option>
<option value="AL">ALBANIA</option>
<option value="DZ">ALGERIA</option>
</select>
</label>
<br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">PO Box Address</legend>
<label for="CAT_Custom_329242_128498">PO Box
<input type="text" maxlength="4000" name="CAT_Custom_329242_128498" id="CAT_Custom_329242_128498" class="cat_textbox" />
</label>
<label for="CAT_Custom_329243_128498">PO Box2
<input type="text" maxlength="4000" name="CAT_Custom_329243_128498" id="CAT_Custom_329243_128498" class="cat_textbox" />
</label>
<label for="CAT_Custom_329244_128498">PO Box Suburb
<input type="text" maxlength="4000" name="CAT_Custom_329244_128498" id="CAT_Custom_329244_128498" class="cat_textbox" />
</label>
<label for="CAT_Custom_329245_128498">PO Box State
<input type="text" maxlength="4000" name="CAT_Custom_329245_128498" id="CAT_Custom_329245_128498" class="cat_textbox" />
</label>
<label for="CAT_Custom_329246_128498">PO Box Postcode
<input type="text" maxlength="4000" name="CAT_Custom_329246_128498" id="CAT_Custom_329246_128498" class="cat_textbox" /></label>
<br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">DX Address </legend>
<label for="CAT_Custom_329247_128499">DX Address1
<input type="text" maxlength="4000" name="CAT_Custom_329247_128499" id="CAT_Custom_329247_128499" class="cat_textbox" />
</label>
<label for="CAT_Custom_329248_128499">DX Address2
<input type="text" maxlength="4000" name="CAT_Custom_329248_128499" id="CAT_Custom_329248_128499" class="cat_textbox" />
</label>
<label for="CAT_Custom_329250_128501">Preferred Contact Method
<select name="CAT_Custom_329250_128501" id="CAT_Custom_329250_128501" class="cat_dropdown">
<option value=" ">-- Please select --</option>
<option value="Email">Email</option>
<option value="Home Address">Home Address</option>
<option value="Work Address">Work Address</option>
<option value="DX Address">DX Address</option>
</select>
</label>
<br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">Billing Address </legend>
<label for="CAT_Custom_329122_128445">Membership Type <span class="req">*</span>
<select name="CAT_Custom_329122_128445" id="CAT_Custom_329122_128445" class="cat_dropdown">
<option value=" ">-- Please select --</option>
<option value="Full Membership">Full Membership</option>
<option value="Associate Membership">Associate Membership</option>
<option value="Student Membership">Student Membership</option>
</select></label>
<label for="BillingAddress">Billing Address <span class="req">*</span>
<input type="text" name="BillingAddress" id="BillingAddress" class="cat_textbox" maxlength="500" />
<label for="BillingCity">City <span class="req">*</span>
<input type="text" name="BillingCity" id="BillingCity" class="cat_textbox" maxlength="255" /></label>
<label for="BillingState">State <span class="req">*</span>
<input type="text" name="BillingState" id="BillingState" class="cat_textbox" maxlength="255" /></label>
<label for="BillingZip">Zipcode/Postcode <span class="req">*</span>
<input type="text" name="BillingZip" id="BillingZip" class="cat_textbox" maxlength="255" /></label>
<label for="BillingCountry">Country <span class="req">*</span>
<select name="BillingCountry" id="BillingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AF">AFGHANISTAN</option>
<option value="AX">ALAND ISLANDS</option>
<option value="AL">ALBANIA</option>
</select>
</label>
<br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">Payment Details</legend>
<label>Payment Method <span class="req">*</span>
<label class="lradio nocc">
<input checked="checked" type="radio" name="PaymentMethodType" id="PaymentMethodType_5" value="5" class="PaymentMethodType nocc" onclick="ShowCCFields(this.value);"/> PayPal</label>
<label class="lradio nocc"><input type="radio" name="PaymentMethodType" id="PaymentMethodType_3" value="3" class="PaymentMethodType nocc" onclick="ShowCCFields(this.value);" />Pay Offline</label>
<div id="payOffline">
<p style="margin: 0px; padding: 0px;"> If you would like to pay offline download this form.
</div>
<label class="lradio usecc"> <input type="radio" class="PaymentMethodType usecc" onclick="ShowCCFields(this.value);" name="PaymentMethodType" id="PaymentMethodType_1" value="1" />Credit Card</label>
<div id="creditCardType" style="margin: 0px; padding: 0px;">
<label for="CardName">Name on Card <span class="req">*</span>
<input type="text" name="CardName" id="CardName" class="cat_textbox" autocomplete="off" /></label>
<label for="CardNumber">Card Number <span class="req">*</span>
<input type="text" name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" /></label>
<label>Card Expiry <span class="req">*</span>
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01" selected="selected">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</label>
<label for="CardType">Card Type <span class="req">*</span>
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
</select>
</label>
<label for="CardCCV">CCV Number <span class="req">*</span>
<input type="text" name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" />
</label> </div>
<label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span>
<input type="text" name="Amount" id="Amount" class="cat_textbox"/>
</label> <br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount54637 = 0;
function checkWholeForm54637(theForm) {
var why = "";
if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");
if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
if (theForm.Password && theForm.PasswordConfirm) {
why += isEmpty(theForm.Password.value, "Password");
why += isEmpty(theForm.PasswordConfirm.value, "Confirm Password");
if (theForm.Password.value != theForm.PasswordConfirm.value) why += appendBreak("- Password and its confirmation do not match.");
if (theForm.Password.value.length < 6) why += appendBreak("- Password must be 6 characters or longer.");
}
if (theForm.HomeAddress) why += isEmpty(theForm.HomeAddress.value, "Home Address");
if (theForm.HomeCity) why += isEmpty(theForm.HomeCity.value, "Home City");
if (theForm.HomeState) why += isEmpty(theForm.HomeState.value, "Home State");
if (theForm.HomeZip) why += isEmpty(theForm.HomeZip.value, "Home Zipcode");
if (theForm.HomeCountry) why += checkDropdown(theForm.HomeCountry.value, "Home Country");
if (theForm.HomePhone) why += isEmpty(theForm.HomePhone.value, "Home Phone Number");
if (theForm.CellPhone) why += isEmpty(theForm.CellPhone.value, "Cell Phone Number");
if (theForm.WorkAddress) why += isEmpty(theForm.WorkAddress.value, "Work Address");
if (theForm.WorkCity) why += isEmpty(theForm.WorkCity.value, "Work City");
if (theForm.WorkState) why += isEmpty(theForm.WorkState.value, "Work State");
if (theForm.WorkZip) why += isEmpty(theForm.WorkZip.value, "Work Zipcode");
if (theForm.WorkCountry) why += checkDropdown(theForm.WorkCountry.value, "Work Country");
if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");
if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address");
if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City");
if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State");
if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, "");
if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country");
if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) {
if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card");
if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number");
if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount");
}
if (theForm.CAT_Custom_329122_128445) why += checkDropdown(theForm.CAT_Custom_329122_128445.value, "Membership Type");
if (why != "") {
alert(why);
return false;
}
if (submitcount54637 == 0) {
submitcount54637++;
theForm.submit();
return false;
} else {
alert("Form submission is in progress.");
return false;
}
}
//]]>
</script>
</fieldset>
</form>
<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
<script src="/_assets/js/forms.js"></script>
</div>
</div>
</div>
</body>
</html>-->