Isaanne Isaanne - 1 month ago 10
CSS Question

How to remove mystery indents in a form?

Cannot find the reason in the HTML or CSS that would cause some of the form field to indent.



<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<style type="text/css">
.form-style-2 {
max-width: 500px;
padding: 20px 12px 10px 20px;
font: 13px Arial, Helvetica, sans-serif;
}
.form-style-2-heading {
font-weight: bold;
font-style: italic;
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
font-size: 15px;
padding-bottom: 3px;
}
.form-style-2 label {
display: block;
margin: 0px 0px 15px 0px;
}
.form-style-2 label>span {
width: 100px;
font-weight: bold;
float: left;
padding-top: 8px;
padding-right: 5px;
}
.form-style-2 span.required {
color: red;
}
.form-style-2 .tel-number-field {
width: 40px;
text-align: center;
}
.form-style-2 input.input-field {
width: 48%;
}
.form-style-2 input.input-field,
.form-style-2 .tel-number-field,
.form-style-2 .textarea-field,
.form-style-2 .select-field {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid #C2C2C2;
box-shadow: 1px 1px 4px #EBEBEB;
-moz-box-shadow: 1px 1px 4px #EBEBEB;
-webkit-box-shadow: 1px 1px 4px #EBEBEB;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 7px;
outline: none;
}
.form-style-2 .input-field:focus,
.form-style-2 .tel-number-field:focus,
.form-style-2 .textarea-field:focus,
.form-style-2 .select-field:focus {
border: 1px solid #0C0;
}
.form-style-2 .textarea-field {
height: 100px;
width: 55%;
}
.form-style-2 input[type=submit],
.form-style-2 input[type=button] {
border: none;
padding: 8px 15px 8px 15px;
background: #FF8500;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
-moz-box-shadow: 1px 1px 4px #DADADA;
-webkit-box-shadow: 1px 1px 4px #DADADA;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.form-style-2 input[type=submit]:hover,
.form-style-2 input[type=button]:hover {
background: #EA7B00;
color: #fff;
}
</style>

<div class="form-style-2">
<form action="https://www.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST"> <input type=hidden name="orgid" value="00D400000009hI6"> <input type=hidden name="retURL" value="http://www.greenbiz.com/events/verge/honolulu/2017">
<div class="form-style-2-heading">As the person submitting the Speaker, please provide your information:</div>
<div><label for="name">Submitter Name:</label><input id="name" maxlength="80" name="name" size="20" type="text" /></div><p>
<div><label for="email">Submitter Email:</label><input id="email" maxlength="80" name="email" size="20" type="text" /></div><p>
<div><label for="phone">Submitter Phone:</label><input id="phone" maxlength="40" name="phone" size="20" type="text" /></div><p>
<div class="form-style-2-heading">Please provide the information for the speaker and session being nominated:</div>
<div><label><span>Speaker First Name:<span
class="required">*</span></span></label><input id="00N400000034IsL" type="text" class="input-field" name="00N400000034IsL" size="20" type="text" /></div><p>
<div><label><span>Speaker Last Name:<span
class="required">*</span></span></label><input id="00N400000034IsM" maxlength="100" name="00N400000034IsM" size="20" type="text" /></div><p>
<div><label><span>Speaker Email:<span class="required">*</span></span></label><input id="00N400000034IsK" maxlength="80" name="00N400000034IsK" size="20" type="text" /></div><p>
<div><label><span>Title:<span class="required">*</span></span></label><input id="00N400000034IsQ" maxlength="80" name="00N400000034IsQ" size="20" type="text" /></div><p>
<div><label><span>Company:<span class="required">*</span></span></label><input id="00N400000034IsF" maxlength="80" name="00N400000034IsF" size="20" type="text" /></div><p>
<div><label><span>Short Bio:<span class="required">*</span></span></label><textarea id="00N400000034IsJ" name="00N400000034IsJ" rows="5" type="text" wrap="soft"></textarea></div><p>
<div><label><span>Speaker&#39;s LinkedIn:</span></label><input id="00N400000034IsN" maxlength="255" name="00N400000034IsN" size="20" type="text" /></div><p>
<div><label><span>Speaker&#39;s Twitter:</span></label><input id="00N400000034IsO" maxlength="50" name="00N400000034IsO" size="20" type="text" /></div><p>
<div><label><span>What is your prior speaking experience?:<span
class="required">*</span></span></label><textarea id="00N400000034IsI" name="00N400000034IsI" rows="5" type="text" wrap="soft"></textarea></div><p>
<div><label><span>Industry:</span></label><select id="00N400000034IsH" name="00N400000034IsH" title="Industry"><option
value="">--None--</option><option value="Agriculture">Agriculture</option>
<option value="Banking/Finance">Banking/Finance</option> <option
value="Biotechnology">Biotechnology</option> <option
value="Chemicals">Chemicals</option> <option
value="Construction/Building">Construction/Building</option> <option
value="Consulting">Consulting</option> <option
value="Education/Training">Education/Training</option> <option
value="Electronics">Electronics</option> <option value="Food &amp;
Beverage">Food &amp; Beverage</option> <option
value="Government">Government</option> <option
value="Healthcare">Healthcare</option> <option
value="Hotel/Hospitality/Recreation">Hotel/Hospitality/Recreation</option>
<option value="Insurance">Insurance</option> <option
value="Manufacturing">Manufacturing</option> <option
value="Media/Communications">Media/Communications</option> <option
value="NGO">NGO</option> <option value="Non Profit">Non Profit</option> <option
value="Paper Mfg">Paper Mfg</option> <option value="Renewable
Energy/Solar">Renewable Energy/Solar</option> <option
value="Retail">Retail</option> <option
value="Shipping/Logistics">Shipping/Logistics</option> <option
value="Technology/Computers/Networking">Technology/Computers/Networking</option>
<option value="Telecommunications">Telecommunications</option> <option
value="Transportation">Transportation</option> <option
value="Utilities/Energy">Utilities/Energy</option>
<option value="Other">Other</option> </select></div><p>

<div><label for="subject"><span>Subject</span></label><span class="required">*</span><input id="subject" maxlength="80" name="subject" size="20" type="text" /></div><p>
<div><label for="description"><span>Description</span></label><span class="required">*</span><textarea name="description"></textarea></div><p>
<div><label><span>Session Format:<span class="required">*</span></span></label><p>
<select id="00N400000034IsP" name="00N400000034IsP" title="Session
Format">
<option value="">--None--</option><option value="VERGE Talk">VERGE Talk</option>
<option value="General Breakout">General Breakout</option>
<option value="Technical Tutorial: How To&#39;s">Technical Tutorial: How To&#39;s</option>
<option value="Case Study: Stories from the Field">Case Study: Stories from the Field</option> <option value="Interactive Workshop">Interactive Workshop</option> </select></div>
<div><label><span>How is your session convergent?:<span
class="required">*</span></span></label><textarea id="00N400000034J2N" name="00N400000034J2N" rows="3" type="text" wrap="soft"></textarea></div><p>
<div><label><span>Session Interactivity:<span
class="required">*</span></span></label><textarea id="00N400000034J2S" name="00N400000034J2S" rows="3" type="text" wrap="soft"></textarea></div><p>
<div> <input type=hidden id="00N400000034IsG" name="00N400000034IsG" value="VERGE
Hawaii 2017"></div>
<input type="hidden" id="external" name="external" value="1" />
<input type="submit" name="submit"> </div>
</form>





Created a form in HTML and the items in the form are cascading as if there are indents.

What the form looks like:


Answer

Add the below to your file in <head> section or preferably in your css include file.

<style>
label {
    display:inline-block;
    width:100px;
}
</style>

And then add a <br> or two between each line.

You may still need to fuss with it a bit to get it the way you want. There are more elegant ways to do this, but this is a start.