Forum Moderators: not2easy

Message Too Old, No Replies

Fbml + Css

         

Jimmyco

11:57 pm on Dec 1, 2010 (gmt 0)

10+ Year Member



Okay, I'm stumped. I've helped many on here, so I hope I can get help in return. I can't get the 3rd box to position underneath the second. The project is a AJAX form with some design. I can provide a link to the page if requested. I am working on a Facebook FBML Tab my FBML/HTML and CSS sheet are below:


<link rel="stylesheet" type="text/css" href="http://www.armlsblog.com/facebook/fb-contest2.css?v=3.9" />
<center>
<table cellspacing="0" cellpadding="0" border="0" class="tbkcolor1" width="518">
<TR><TD align="center">
<img src="http://i293.photobucket.com/albums/mm79/ARMLS/FB-TAB-December-Contest-header-5.png" border="0"></center>
</td></tr>
<TR><TD valign="top">
<h1>
ARMLS “Like” and Win Holiday Giveaway</h1>
<p class="lat"><strong>Win a Supra iBox Lockbox by “Liking” us, giant bow included.</strong></p><p class="lat">

Become a Fan of the Official ARMLS Facebook page, fill out a short online form, and be entered to win a

FREE Supra lockbox! Whether you know it as “Liking”, “Becoming a fan”, or ‘Friending”, hitting the “Like”

button is all the same. 3 winners will get their stockings stuffed January 3rd. The contest is open to

existing and new fans alike, but make sure you enter before midnight December 31st, 2010. (See <a href="http://www.armlsblog.com/facebook/rules.html" target="_blank"> Rules & Eligibility</a>) <img src="http://i293.photobucket.com/albums/mm79/ARMLS/tracking-fb-contest.jpg">
</p>
<div class="contact_formx">
<label>STEP 1 - LIKE ARMLS</label><BR><BR>
If don't already "Like" us, click the "Like" button at the top of the screen. If you are already a fan, proceed to Step 2 below.
<br/>
</div>
<BR>
<div class="contact_form">
<form action="http://www.armlsblog.com/facebook/fb-sql-contest-engine.php" id="ContactForm" name="ContactForm" method="post">
<label>STEP 2 - ALMOST DONE!</label><BR><BR>
<center>
<table width="400" cellspacing="2" border="0">
<tr>
<td width="50%" valign="top">
<label>Name</label><br/>
<input type="text" tabindex="1" value="" name="name" id="name"/> <br/><BR>
</td><td width="50%" valign="top">
<label>Email</label><br/>
<input type="text" tabindex="2" value="" name="email" id="email"/>
</td></tr><tr>
<td width="50%" valign="top">
<label>Telephone</label><BR>
<input type="text" tabindex="3" value="" name="telephone" id="telephone"/><BR>
<BR>
</td>
<td width="50%" valign="top"><BR>
<input type="button" class="submit" onclick="submitAJAXForm(this);" value="Submit Entry"/>
<input type="hidden" value="0" name="send" id="send" style="display: none;"/>
<input type="hidden" value="0" name="message" id="message" style="display: none;"/>
<input type="hidden" value="contactus" name="orgin" id="orgin" style="display: none;"/>
</form>
<input type="button" value="Show" class="thickbox" title="Thanks!" alt="#TB_inline?height=50&amp;width=250&amp;inlineId=messageDiv" style="display: none;" id="messageShow"/>

<script>
function submitAJAXForm(sub)
{
sub.setDisabled(true);
sub.setValue("Submit Entry");

var ajax = new Ajax();
ajax.responseType = Ajax.FBML;

ajax.ondone = function(data)
{
var msgdialog = new Dialog();
msgdialog.showMessage('Confirmation', 'Success! You have been entered into the ARMLS Lockbox Giveaway. Winners will be notfied via Email and announced here on 01/03/2011');
return false;
}

ajax.onerror = function() {
var msgdialog = new Dialog();
msgdialog.showMessage('Error', 'An error has occurred while trying to submit.');
return false;
}

// collect field values
var queryParams = {
'name' : document.getElementById('name').getValue(),
'email' : document.getElementById('email').getValue(),
'telephone' : document.getElementById('telephone').getValue(),
'message' : document.getElementById('message').getValue(),
'send' : document.getElementById('send').getValue(),
'origin' : document.getElementById('orgin').getValue()
};
ajax.post('http://www.armlsblog.com/facebook/fb-sql-contest-engine.php?sys=fbpage', queryParams);
return false;
}
</script>
</form
</td></tr></table></center>
<small>
This contest is not affiliated with or endorsed by Facebook™</small>
</div>

<div class="contact_formx1">
<label>STEP 3 - Share (Optional)</label><BR><BR>
If don't already "Like" us, click the "Like" button at the top of the screen. If you are already a fan, proceed to Step 2 below.
<br/>
</div>
</td></tr></table>
TEST

[edited by: Jimmyco at 11:59 pm (utc) on Dec 1, 2010]

Jimmyco

11:58 pm on Dec 1, 2010 (gmt 0)

10+ Year Member



And now the CSS:

.lat {font-size:12px;}
h1 { font-size:16px; font-family: verdana, helvetica, arial, sans-serif; padding-left: 10px; padding-right: 10px; }
p { line-height:16px; font-family: verdana, helvetica, arial, sans-serif; padding-bottom: 12px; padding-left: 10px; padding-right: 10px;}
.tbor {background-image: url('http://i293.photobucket.com/albums/mm79/ARMLS/fb-learn-a-thon-bk.png'); background-repeat:no-repeat;}
.imgbotbor {border-style:solid; border-color:#FFFFFF; border-width:0px;}
.tbkcolor1 {background-color:#f5f5f5; border-style:solid; border-color:#898989; border-width:0px;}
.tbkcolorx {background-color:#000000;}
.opensoon {background-color:#DDDDDD; border-style:solid; border-color:#DDDDDD; border-width:1px;}

.lat a:link {color: #ab0000; text-decoration: none; }
.lat a:active {color: #ab0000; text-decoration: none; }
.lat a:visited {color: #ab0000; text-decoration: none; }
.lat a:hover {color: #ab0000; text-decoration: none; }

.contact_form {width:500px; margin-bottom:10px; background:#CCCCCC; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:10px;opacity:1.0; margin-bottom:10px;}
label {color:#000; text-transform:uppercase;}
#section-three-top{background-color: transparent;background-image: url("http://armlsblog.com/facebook/s3-bgtop1.png");background-repeat: repeat-x;background-attachment: scroll;background-position: 50% 0pt;}
a:link, a:visited {color:#0896e6;}

.contact_formx {width:500px; margin-bottom:10px; background:#CCCCCC; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:10px;opacity:1.0; margin-bottom:10px;}
label {color:#000; text-transform:uppercase;}
#section-three-top{background-color: transparent; background-image: url("http://armlsblog.com/facebook/s3-bgtop1.png");background-repeat: repeat-x;background-attachment: scroll;background-position: 50% 0pt;}
a:link, a:visited {color:#0896e6;}

.contact_formx1 {width:500px; margin-top:10px; margin-top:10px; background:#999999; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:10px;opacity:1.0; margin-bottom:10px; margin-top:10px;}
label {color:#000; text-transform:uppercase;}
a:link, a:visited {color:#0896e6;}

milosevic

10:06 am on Dec 3, 2010 (gmt 0)

10+ Year Member



Hi Jimmyco, I just loaded this code in my browser but I can't see where the problem is.

"I can't get the 3rd box to position underneath the second. " - Do you mean the step 3 box?

If your Q is about positioning of FB like elements (I can't tell if you are just using the top image), they aren't loading for me with your sample code.