added demo positioning, fixed pull request for chrome

Author: Cedric Dugas

css/template.css

@@ -10,7 +10,6 @@ form.formular {
 	width: 300px;
 	margin: 0 auto;
 }
-
 .formular fieldset {
 	margin-top: 20px;
 	padding: 15px;
@@ -26,6 +25,7 @@ form.formular {
 .formular fieldset label {
 	float: none;
 	text-align: inherit;
+	display:block;
 	width: auto;
 }
 

demos/demoPositioning.html

@@ -95,8 +95,9 @@
 			</legend>
 			<label>
 				<div>Field is required : </div>
-				<input value="" class="validate[required] text-input" type="text" name="req" id="req" />
+				
 			</label>
+			<input value="" class="validate[required] text-input" type="text" name="req" id="req" />
 			<label>
 
 				<div>Favorite sport 1:</div>
@@ -131,8 +132,10 @@
 				<input class="validate[required] radio" type="radio" name="group0" id="radio3" value="9"/></div>
 			</label>
 			<label>
-				<span class="checkbox">I accept terms of use : </span>
+			<div>
+				I accept terms of use : 
 				<input class="validate[required] checkbox" type="checkbox" id="agree" name="agree"/>
+				</div>
 			</label>
 		</fieldset>
 

js/jquery.validationEngine.js

@@ -1239,7 +1239,12 @@
 				// empty relative span does not disturb page layout
 				// prompt positioned absolute to relative span
 				// vertical-align:top so position calculations are the same as isOverflown
-				var outer = $('<span>').css('position','relative').css('vertical-align','top').addClass('formErrorOuter').append(prompt.css('position','absolute'));
+				var outer = $('<div>').css({
+					'position'		:'relative',
+					'display'		:'inline',
+					'overflow'		:'auto'
+				}).addClass('formErrorOuter').append(prompt.css('position','absolute'));
+
 				field.before(outer);
 				if(options.relativePadding) {
 					outer.css('padding-bottom', prompt.height() + 'px');