...

View Full Version : Removing white space between image and form.



colin85
11-22-2010, 11:33 AM
Hi guys,

I recently used jotform to create a form for a facebook tab. I then placed an image above it to customize it.

However there is a white line between the form and image, is there any code I can get rid of to delete the gap?

Thanks folks,

Colin


<link type="text/css" rel="stylesheet" href="http://www.jotform.com/formstyle/3220708447.css?v=3.1.9"/>
<link type="text/css" rel="stylesheet" href="http://www.jotform.com/css/styles/form.css?v3.1.9"/>
<link href="http://www.jotform.com/css/calendarview.css?v3.1.9" rel="stylesheet" type="text/css" />
<img style="text-align: center; margin: 0px auto 10px; width: 520px; display: block; height: 477px;" id="BLOGGER_PHOTO_ID_5539831220194735330" alt="" src="http://thinkhousepr.com/fbapps/clonakilty/imagery/formheader1.jpg"/>

<script type="text/javascript">
var Facebook = {
get: function(id) {
return document.getElementById(id);
},
map: function(array, block) {
results = [];
for (var i = 0, l = array.length; i < l; i++) {
results.push(block(array[i]));
}
return results;
},
domCollect: function(element, matcher) {
var $this = this,
collection = [];
var recurse = function(subelement) {
var nodes = subelement.getChildNodes();
$this.map(nodes,
function(node) {
if (matcher(node)) {
collection.push(node);
}
if (node.getFirstChild()) {
recurse(node);
}
});
};
recurse(element);
return collection;
},
getByName: function(elementName) {
var matcher = function(element) {
return (element.getName() === elementName);
};
return this.domCollect(document.getRootElement(), matcher);
},
alert: function(msg, title) {
new Dialog().showMessage(title, msg);
},
error: function(msg, liid) {
this.get('id_' + liid).setStyle('backgroundColor', '#FFAAAA');
this.alert(msg, "Error");
return false;
},
validateEmail: function(lid) {
var tvalue = this.get('input_' + lid).getValue();
var email = /[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])/i;
return tvalue.match(email);
},
checkElement: function(temp, etype, ename) {
var templid = temp.split("_");
var lid = templid[1];
var tel = this.get(temp);
var error = false;
switch (etype) {
case "dropdown":
error = this.get(temp).getSelectedIndex() === 0;
break;
case "textarea":
case "fileupload":
error = this.get(temp).getValue().length < 1;
break;
case "email":
case "textbox":
if (this.get(temp).getValue().length < 1) {
error = true;
} else {
if (this.get(temp).getClassName().indexOf('validate') != -1 && this.get(temp).getClassName().indexOf('Email') != -1) {
if (!this.validateEmail(lid)) {
error = "Please enter a valid email address";
}
}
}
break;
case "radio":
case "checkbox":
tel = this.get(temp + "_0");
var elt = this.getByName(tel.getName());
var ll = 0;
if (elt.length == 1) {
if (elt[0].getChecked() === false) {
error = true;
}
} else {
ll = elt.length;
var chk = false;
for (j = 0; j < ll; j++) {
if (elt[j].getChecked() === true) {
chk = true;
break;
}
}
if (chk === false) {
error = true;
}
}
break;
}
if (error !== false) {
this.error(((error === true) ? ename + ' is required': error), lid);
return false;
} else {
this.get('id_' + lid).setStyle('backgroundColor', 'transparent');
return true;
}
},
checkForm: function() {
var tempo = this.get('reqids').getValue().split(",");
for (var i = 0; i < tempo.length; i++) {
var mixedel = tempo[i].split("*");
if (this.checkElement(mixedel[0], mixedel[1], mixedel[2]) === false) {
return false;
}
}
return true;
}
};
</script>
<form class="jotform-form" onsubmit="return Facebook.checkForm();" action="http://www.jotform.com/submit.php" method="post" enctype="multipart/form-data" name="form_3220708447" id="3220708447" accept-charset="utf-8">
<input type="hidden" name="formID" value="3220708447" />
<input type="hidden" id="reqids" name="requireds" value="">
<div class="form-all">
<ul class="form-section">
<li class="form-line" id="id_3">
<label class="form-label-left" id="label_3" for="input_3"> Full Name </label>
<div id="cid_3" class="form-input"><span class="form-sub-label-container"><input class="form-textbox" type="text" size="10" name="q3_fullName3[first]" id="first_3" />
<label class="form-sub-label" for="first_3" id="sublabel_first"> First Name </label></span><span class="form-sub-label-container"><input class="form-textbox" type="text" size="15" name="q3_fullName3[last]" id="last_3" />
<label class="form-sub-label" for="last_3" id="sublabel_last"> Last Name </label></span>
</div>
</li>
<li class="form-line" id="id_4">
<label class="form-label-left" id="label_4" for="input_4"> E-mail </label>
<div id="cid_4" class="form-input">
<input type="text" class="form-textbox validate[Email]" id="input_4" name="q4_email4" size="30" />
</div>
</li>
<li class="form-line" id="id_5">
<label class="form-label-left" id="label_5" for="input_5"> Upload CV </label>
<div id="cid_5" class="form-input">
<input class="form-upload" type="file" name="q5_uploadCv" id="input_5" accept="pdf, doc, docx, xls, csv, txt, rtf, html, zip, mp3, wma, mpg, flv, avi, jpg, jpeg, png, gif" maxsize="500" />
</div>
</li>
<li class="form-line" id="id_6">
<label class="form-label-left" id="label_6" for="input_6"> Upload Recipes </label>
<div id="cid_6" class="form-input">
<input class="form-upload" type="file" name="q6_uploadRecipes" id="input_6" accept="pdf, doc, docx, xls, csv, txt, rtf, html, zip, mp3, wma, mpg, flv, avi, jpg, jpeg, png, gif" maxsize="500" />
</div>
</li>
<li class="form-line" id="id_2">
<div id="cid_2" class="form-input-wide">
<div style="margin-left:156px" class="form-buttons-wrapper">
<input id="input_2" type="submit" value="Submit Form" class="form-submit-button">
</div>
</div>
</li>
<li style="display:none">
Should be Empty:
<input type="text" name="website" value="" />
</li>
</ul>
</div>
<input type="hidden" id="simple_spc" name="simple_spc" value="3220708447" />
<script>
document.getElementById("si" + "mple" + "_spc").setValue("3220708447-3220708447");
</script>
</form>

abduraooft
11-22-2010, 01:40 PM
Hard to tell without seeing a live page.

colin85
11-22-2010, 01:51 PM
My bad. Check out the tab here (http://www.facebook.com/pages/Club-Test/236056987301?v=app_6009294086&ref=ts).

abduraooft
11-22-2010, 02:06 PM
<img style="text-align: center; margin: 0px auto 10px; width: 520px; display: block; height: 477px;" id="BLOGGER_PHOTO_ID_5539831220194735330" alt="" src="http://thinkhousepr.com/fbapps/clonakilty/imagery/formheader1.jpg"/>
There's a 10px bottom margin applied on that image.

colin85
11-22-2010, 06:32 PM
perfect. thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum