I've created an HTML5 form with custom error messages and validation through webshim, which is mostly working and displaying correctly, however the bubble isn't displaying below the checkboxes and defaults to the top-left of the page. I'm not sure if my CSS is throwing off the bubble, or if it's trying to display under an element I'm not showing.
This is my markup (the structure's a little unusual because I need to display the submit button under two separate forms):
<div id="appraisals-form" class="contact-form">
<form id="appform" role="form" method="post">
<div class="section-bar"></div>
<p class="section-title">Step 1</p>
<label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
<label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
<label for="phone"><span>Phone</span><input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /></label>
<label for="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(i.e. sculpture, painting...)</span><input class="input-field" type="text" name="art-type" required data-errormessage-value-missing="Please enter your item's type of artwork."></label>
<label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="artist" required data-errormessage-value-missing="Please enter your item's artist."></label>
<label for="title" class="wrap"><span class="wrap-lg">Title of Piece</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="title" required data-errormessage-value-missing="Please enter your item's title."></label>
<label for="measurements"><span>Measurements</span><input type="text" class="input-field" name="measurements" required data-errormessage-value-missing="Please enter your item's measurements." /></label>
<label for="date" class="wrap"><span class="wrap-lg">Date / Age</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="date" required data-errormessage-value-missing="Please enter your item's date / age."></label>
<label for="condition"><span>Condition</span><textarea name="condition" class="textarea-field" required data-errormessage-value-missing="Please enter your item's condition."></textarea></label>
<label for="doc" class="wrap"><span class="wrap-lg">Documentation</span><span class="wrap-sm">(certificates, receipts, previous appraisals, etc.)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's documentation."></textarea></label>
<label for="writing" class="wrap"><span class="wrap-lg">Writing / Labels</span><span class="wrap-sm">(text or any writing or labels on the art)</span><textarea name="writing" class="textarea-field" required data-errormessage-value-missing="Please enter your item's text / labels."></textarea></label>
<label for="purchase-hist" class="wrap"><span class="wrap-lg">Purchase History</span><span class="wrap-sm">(date, cost, location, etc.)</span><textarea name="purchase-hist" class="textarea-field" required data-errormessage-value-missing="Please enter your item's purchase history."></textarea></label>
<label for="additional" class="wrap"><span class="wrap-lg">Additional Details</span><span class="wrap-sm">(anything else you know)</span><textarea name="additional" class="textarea-field" required data-errormessage-value-missing="Please enter your item's additional details."></textarea></label>
<fieldset id="appraisals-text-wrap">
<legend>Type of Appraisal</legend>
<input type="checkbox" data-grouprequired="" id="insurance" name="app-type" value="Insurance" /><label for="insurance">Insurance</label>
<input type="checkbox" id="donation" name="app-type" value="Donation" /><label for="donation">Donation</label>
<input type="checkbox" id="estate" name="app-type" value="General Estate Planning" /><label for="estate">General Estate Planning</label>
</fieldset>
</form>
<div class="section-bar"></div>
<p class="section-title">Step 2</p>
<p>Please upload images of all sides of your artwork.</p>
<div style="clear: both;"></div>
<form action="file-upload.php" class="dropzone" id="appraisals-upload">
<div class="dz-message">
<p><img src="img/ui/upload-cloud.png" /><p/>
<p><img src="img/ui/browse-button.jpg" /></p>
<p>Or drag & drop</p>
</div>
</form>
<input type="checkbox" data-grouprequired="" name="tac" value="Accepted T&Cs" /><label for="tac" style="font-size: 14px; font-weight: bold;">Terms & Conditions <span style="width: 100%; padding: 5px 0 13px; font-size: 14px; text-align: left; text-transform: none;">Duis lobortis nulla a eros porttitor, ut congue elit commodo. Nunc ut dapibus elit. Suspendisse euismod rhoncus felis, id vulputate mauris posuere vitae. Praesent bibendum maximus nibh, nec tempor diam blandit in. Praesent non metus in odio vehicula cursus vulputate quis quam. Nulla varius massa ac libero commodo imperdiet. Fusce tincidunt metus sapien, sed fringilla nibh vulputate eget. Suspendisse sodales nisi quis hendrerit porttitor. Morbi in augue sapien. Maecenas ultricies, nisl vitae vehicula vulputate, nunc tellus sagittis turpis, nec laoreet quam velit non nunc. In aliquam libero a tellus commodo, at aliquet risus imperdiet. Fusce finibus a nulla et facilisis.</span></label>
<div style="clear: both;"></div>
<div class="centred-button"><input type="submit" name="submit" value="" form="appform" class="submit-button" /></div>
</div>
Demo: http://jsfiddle.net/6bkv2vfz/.
Any help would be really appreciated!
Try this:
input[type="checkbox"] {
/* display: none; */
visibility: hidden;
margin-right: -15px;
}
When you put display none, they can not find the current position of the checkbox