The main point here is fbml doesn't support all html tags (Firefox supports almost all html).
I found a great fbml tutorial. Notice the fbml code they have written for a similar page as yours.
How to Create Facebook FBML Template, Part1
How to Create Facebook FBML Page, Part 2
This is the best tutorial I have seen on the net. Based on that, I removed the top and bottom part of your code. See whether this works. Also, you can't store images in facebook. So you need upload them to pic sharing site and link them to the page.
Code: Select all
<div style="width:520px; padding:0px; margin:0px auto; font-family:'Times New Roman', Times, serif; font-size:14px; color:#b4c0c3; text-align:left; background: url(free_facebook_template/free_facebook_template/html/images/bg.jpg) no-repeat left top">
<div style="padding:10px 0 9px 20px">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="22" width="63"><img src="free_facebook_template/free_facebook_template/html/images/like.png" alt="" /></td>
<td width="201" style="font-size:12px"><div style="font-family:Tahoma; font-size:12px; color:#FFFFFF">Don't forget to become a fan!</div></td>
<td width="151"> </td>
<td width="31"><a href="#"><img src="free_facebook_template/free_facebook_template/html/images/icon2.png" alt="" border="0" /></a></td>
<td width="54"><a href="#"><img src="free_facebook_template/free_facebook_template/html/images/icon3.png" alt="" border="0" /></a></td>
</tr>
</table>
</div>
<div style="font-size:0px"></div>
<div class="desert" style="padding:5px 30px 5px; font-size:42px; font-weight: bold; color: #F93; font-family: Arial, Helvetica, sans-serif;"><strong> Desert Jewel Marketing</strong></div>
<div style="padding:0 5px 10px 20px">
<div style="width:275px; float:left">
<div style="font-size:0px"><img src="free_facebook_template/free_facebook_template/html/images/left_top.png" alt="" /></div>
<div style="background:url(free_facebook_template/free_facebook_template/html/images/left_bg.png) repeat-y left top">
<div style="padding:5px 0px 29px 11px"><div style="padding:0 7px 0 5px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#b4c0c3">
<h1><strong>Promoting YOUR Business</strong></h1>
<p><strong>WEBSITE MARKETING</strong><br />
Most business owners are aware you need a website, but what they don’t know is that website quickly becomes just a billboard on an empty dirt road, if you don’t continually market it and keep on the first page of search engines. At DJM we pride ourselves on simple, but effective promotion of your website so you get noticed and retain current customers and attract new ones</p>
</div>
<div style="padding:0px 7px 0 5px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#b4c0c3">
<div style="padding-bottom:0px; font-family: 'Arial Black', Gadget, sans-serif; font-size: xx-small;">
<h1>Affordable Solutions </h1>
</div>
<p><img src="iStock_000003551840XSmall.jpg" alt="" width="96" height="73" align="left" style="padding-right:20px" /></p>
<p>At Desert Jewel Marketing we offer you affordable business solutions to make your marketing dollars stretch and get you noticed by not only new customers, but we help you retain your current ones.</p>
<ul>
<li>Custom Websites starting at $495</li>
<li>Marketing your site and business starting at $250 </li>
<li>Videos with distribution starting at $245</li>
<li>Social Media Management starting at $250 month</li>
<li>Email Marketing starting at $350</li>
</ul>
<p>Today, communication is key. We help you stay in contact with clients and customers so you and your business comes to mind when they are shopping for what you have to offer.</p><div style="clear:both; font-size:0px; height:1px"><img src="free_facebook_template/free_facebook_template/html/images/spacer.gif" alt="" /></div>
</div>
</div>
</div>
<div style="font-size:0px"></div>
</div>
<div style="width:200px; float: right">
<div style="padding:24px 3px 3px 3px; font-size:22px; color:#FFFFFF; font-family: Arial, Helvetica, sans-serif;"> <strong>Enter to win a FREE video for your business!</strong></div>
<div style="padding:0px 10px 0 3px">
<div style="padding:5px 0 5px 0" align="right">
<p><!-- AWeber Web Form Generator 3.0 -->
<style type="text/css">
#af-form-1073346283 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-1073346283 .af-body .privacyPolicy{color:#FFFFFF;font-size:11px;font-family:Verdana, sans-serif;}
#af-form-1073346283 .af-body a{color:#EDA200;text-decoration:underline;font-style:normal;font-weight:normal;}
#af-form-1073346283 .af-body input.text, #af-form-1073346283 .af-body textarea{background-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-1073346283 .af-body input.text:focus, #af-form-1073346283 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
#af-form-1073346283 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:11px;font-family:Verdana, sans-serif;}
#af-form-1073346283 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:repeat-x;background-position:inherit;background-image:url("http://forms.aweber.com/images/forms/download/peel/body.png");color:#FFFFFF;font-size:11px;font-family:Verdana, sans-serif;}
#af-form-1073346283 .af-header{padding-bottom:9px;padding-top:32px;padding-right:10px;padding-left:99px;background-color:transparent;background-repeat:no-repeat;background-position:inherit;background-image:url("http://forms.aweber.com/images/forms/download/peel/header.png");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#7A570D;font-size:16px;font-family:Verdana, sans-serif;}
#af-form-1073346283 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
#af-form-1073346283 .af-quirksMode{padding-right:10px;padding-left:10px;}
#af-form-1073346283 .af-standards .af-element{padding-right:10px;padding-left:10px;}
#af-form-1073346283 .bodyText p{margin:1em 0;}
#af-form-1073346283 .buttonContainer input.submit{background-image:url("http://forms.aweber.com/images/auto/gradient/button/07c.png");background-position:top left;background-repeat:repeat-x;background-color:#0057ac;border:1px solid #0057ac;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-1073346283 .buttonContainer input.submit{width:auto;}
#af-form-1073346283 .buttonContainer{text-align:left;}
#af-form-1073346283 body,#af-form-1073346283 dl,#af-form-1073346283 dt,#af-form-1073346283 dd,#af-form-1073346283 h1,#af-form-1073346283 h2,#af-form-1073346283 h3,#af-form-1073346283 h4,#af-form-1073346283 h5,#af-form-1073346283 h6,#af-form-1073346283 pre,#af-form-1073346283 code,#af-form-1073346283 fieldset,#af-form-1073346283 legend,#af-form-1073346283 blockquote,#af-form-1073346283 th,#af-form-1073346283 td{float:none;color:inherit;position:static;margin:0;padding:0;}
#af-form-1073346283 button,#af-form-1073346283 input,#af-form-1073346283 submit,#af-form-1073346283 textarea,#af-form-1073346283 select,#af-form-1073346283 label,#af-form-1073346283 optgroup,#af-form-1073346283 option{float:none;position:static;margin:0;}
#af-form-1073346283 div{margin:0;}
#af-form-1073346283 fieldset{border:0;}
#af-form-1073346283 form,#af-form-1073346283 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1073346283 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-1073346283 input,#af-form-1073346283 button,#af-form-1073346283 textarea,#af-form-1073346283 select{font-size:100%;}
#af-form-1073346283 p{color:inherit;}
#af-form-1073346283 select,#af-form-1073346283 label,#af-form-1073346283 optgroup,#af-form-1073346283 option{padding:0;}
#af-form-1073346283 table{border-collapse:collapse;border-spacing:0;}
#af-form-1073346283 ul,#af-form-1073346283 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}
#af-form-1073346283,#af-form-1073346283 .quirksMode{width:147px;}
#af-form-1073346283.af-quirksMode{overflow-x:hidden;}
#af-form-1073346283{background-color:transparent;border-color:transparent;border-width:1px;border-style:solid;}
#af-form-1073346283{overflow:hidden;}
.af-body .af-textWrap{text-align:left;}
.af-body input.image{border:none!important;}
.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
.af-body input.text{width:100%;float:none;padding:2px!important;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding:5px 0;}
.af-form-wrapper{text-indent:0;}
.af-form{text-align:left;margin:auto;}
.af-header{margin-bottom:0;margin-top:0;padding:10px;}
.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
.lbl-right .af-element label{text-align:right;}
body {
}
</style>
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1073346283" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="fbdjm" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_62411454a6a5d67013c4c40647ac9da6" />
<input type="hidden" name="meta_adtracking" value="FBDJM" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1073346283" class="af-form"><div id="af-header-1073346283" class="af-header"><div class="bodyText"><p> </p></div></div>
<div id="af-body-1073346283" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-11764734">Name: </label>
<div class="af-textWrap">
<input id="awf_field-11764734" type="text" name="name" class="text" value="" tabindex="500" />
</div>
<div class="af-clear"></div></div>
<div class="af-element">
<label class="previewLabel" for="awf_field-11764735">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-11764735" type="text" name="email" value="" tabindex="501" />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Submit" tabindex="502" />
<div class="af-clear"></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center"><p><a title="Privacy Policy" href="http://www.aweber.com/permission.htm" target="_blank">We respect your email privacy</a></p>
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=jAzszMwsbEwczA==" alt="" /></div>
</form>
<script type="text/javascript">
<!--
(function() {
var IE = /*@cc_on!@*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-1073346283")) {
document.getElementById("af-form-1073346283").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-1073346283")) {
document.getElementById("af-body-1073346283").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-1073346283")) {
document.getElementById("af-header-1073346283").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-1073346283")) {
document.getElementById("af-footer-1073346283").className = "af-footer af-quirksMode";
}
}
})();
-->
</script> </p>
<p><a href="#" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; text-decoration:none">Follow Me On Twitter</a> <img src="free_facebook_template/free_facebook_template/html/images/arrow_read.png" alt="" /></p></div>
</div>
<div style="padding:0px 3px 5px 3px; font-size:25px; color:#FFFFFF; font-family: Arial, Helvetica, sans-serif;"><strong>Contact Info</strong></div>
<div style="font-size:0px; height:1px; background:#20405d"><img src="free_facebook_template/free_facebook_template/html/images/spacer.gif" alt="" /></div>
<div style="padding:18px 10px 0 3px; font-family: Arial, Helvetica, sans-serif; color: #FC0; font-size: 12px;">
<div style="text-transform:uppercase; color:#FFFFFF"></div>
<a href="http://desertjewelmarketing.com">DesertJewelMarketing.com</a>
<div style="padding:1px 0 0px 0">
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p><br>
208.512.0094 </p>
</div>
<div style="padding-top:0px">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="10"> </td>
<td width="30"><a href="#"><img src="free_facebook_template/free_facebook_template/html/images/icon2.png" alt="" border="0" /></a></td>
<td width="32"><a href="#"><img src="free_facebook_template/free_facebook_template/html/images/icon3.png" alt="" border="0" /></a></td>
</tr>
</table>
</div>
</div>
</div>
<div style="clear:both; font-size:0px; height:1px"><img src="free_facebook_template/free_facebook_template/html/images/spacer.gif" alt="" /></div>
</div>
<div style="font-size:0px; height:1px; background:url(free_facebook_template/free_facebook_template/html/images/footer_top.png) repeat-x left center"><img src="free_facebook_template/free_facebook_template/html/images/spacer.gif" alt="" /></div>
<div class="copy" style="background:url(free_facebook_template/free_facebook_template/html/images/footer_bg.png) repeat left top; padding:9px 36px 8px 36px; font-family:'Times New Roman', Times, serif; font-size:14px; color:#627073"><span class="copy" style="background:url(free_facebook_template/free_facebook_template/html/images/footer_bg.png) repeat left top; padding:9px 36px 8px 36px; font-family:'Times New Roman', Times, serif; font-size:14px; color:#627073">Desert Jewel Marketing © All Rights reserved</span></div>
</div>
If this is not working, then please follow the tutorial and modify the code.
Hope that help.
