Databases
StackOverflow2013
Postsdbo
POText over image link on form
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POText over image link on form
    text
    copied!<p>Ok, so I am struggling to setup part of an Aweber form on my page. The form has a button which users click to join a mailing list. I want to put some text over it (so that I can A:B split test the text later). I set up a 2nd div and absolutely positioned the text to do this, it works perfectly.</p> <p>The problem is when a user hovers over the button. Anywhere that the text is over the image, it negates the link. Please help. </p> <p>You can see the page online at www.pregnantatlast.com</p> <p>Here is the code:</p> <pre><code>&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;!-- InstanceBeginEditable name="doctitle" --&gt; &lt;title&gt;Pregnant At Last - Conditions that Stop Pregnancy, Solutions&lt;/title&gt; &lt;!-- InstanceEndEditable --&gt; &lt;style type="text/css"&gt; &lt;/style&gt; &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt; &lt;!-- InstanceBeginEditable name="head" --&gt; &lt;!-- InstanceEndEditable --&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt; &lt;div id="header_txt"&gt; Pregnant At Last &lt;h1&gt;Increase Fertility - Get Pregnant - Naturally&lt;/h1&gt; &lt;/div&gt; &lt;div id="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="causes.html"&gt;Causes&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="miscarriage.html"&gt;Miscarriage&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="nutrition.html"&gt;Nutrition&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="conditions.html"&gt;Conditions&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--End menu--&gt; &lt;/div&gt;&lt;!--End header--&gt; &lt;!-- InstanceBeginEditable name="Content" --&gt; &lt;div id="content_bg"&gt; &lt;div id="content"&gt; &lt;h1&gt;Common fixable conditions often lead to infertility.&lt;/h1&gt; &lt;div class="picture"&gt; &lt;img src="Assets/Images/44037990.jpg" width="301" alt="Couple with Doctor" /&gt; &lt;/div&gt; &lt;div id="caption"&gt; &lt;p&gt;2/3 of all infertility cases are linked to the woman. &amp;nbsp; Many can be helped.&lt;/p&gt; &lt;/div&gt; &lt;div id="list"&gt; &lt;ul&gt; &lt;li&gt;Environmental factors are known to block conception&lt;/li&gt; &lt;li&gt;Some medical treatments alter sperm production and cause ovarian problems&lt;/li&gt; &lt;li&gt;Simple lifestyle changes can fix many conditions&lt;/li&gt; &lt;li&gt;How to breathe so your body heals itself&lt;/li&gt; &lt;li&gt;Herbs that help your body clense&lt;/li&gt; &lt;/ul&gt; &lt;p&gt; Learn what to &lt;span&gt;do&lt;/span&gt; and more importantly, what &lt;span&gt; not to do&lt;/span&gt;. &lt;/p&gt; &lt;p&gt; Heal your &lt;span&gt;body&lt;/span&gt; and become &lt;span&gt;fertile&lt;/span&gt; in no time! &lt;/p&gt; &lt;/div&gt; &lt;!--End list--&gt; &lt;div id="formbox"&gt; &lt;h2&gt;Learn Secrets to Get Pregnant&lt;br /&gt;Naturally in Months&lt;/h2&gt; &lt;div id="formtxt"&gt; &lt;h3&gt;Sign up for a FREE 7 day course and recieve:&lt;/h3&gt; &lt;p&gt;-10 Household Chemicals you Must Avoid&lt;/p&gt; &lt;p&gt;-Simple technique to double chances of conception&lt;/p&gt; &lt;p&gt;-Ways to help your parner increase his sperm count&lt;/p&gt; &lt;/div&gt; &lt;!--End formtxt--&gt; &lt;div id="form"&gt; &lt;!-- AWeber Web Form Generator 3.0 --&gt; &lt;style type="text/css"&gt; #af-form-69035635 .af-body .af-textWrap{width:98%;display:block;float:none;} #af-form-69035635 .af-body input.text, #af-form-69035635 .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-69035635 .af-body input.text:focus, #af-form-69035635 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;} #af-form-69035635 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;} #af-form-69035635 .af-body{padding-bottom:0px;padding-top:5px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:11px;font-family:Verdana, sans-serif;} #af-form-69035635 .af-quirksMode{padding-right:10px;padding-left:10px;} #af-form-69035635 .af-standards .af-element{padding-right:10px;padding-left:10px;} #af-form-69035635 .buttonContainer input.submit{background-color:#c20606;background-image:url("http://www.pregnantatlast.com/Assets/Images/button_arrow3.jpg");color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;} #af-form-69035635 .buttonContainer input.submit{width:auto;} #af-form-69035635 .buttonContainer{text-align:center;} #af-form-69035635 button,#af-form-69035635 input,#af-form-69035635 submit,#af-form-69035635 textarea,#af-form-69035635 select,#af-form-69035635 label,#af-form-69035635 optgroup,#af-form-69035635 option{float:none;position:static;margin:0;} #af-form-69035635 div{margin:0;} #af-form-69035635 form,#af-form-69035635 textarea,.af-form-wrapper,.af-form-close- #af-form-69035635 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;} #af-form-69035635 input,#af-form-69035635 button,#af-form-69035635 textarea,#af-form-69035635 select{font-size:100%;} #af-form-69035635 select,#af-form-69035635 label,#af-form-69035635 optgroup,#af-form-69035635 option{padding:0;} #af-form-69035635,#af-form-69035635 .quirksMode{width:329px;} #af-form-69035635.af-quirksMode{overflow-x:hidden;} #af-form-69035635{background-color:#FFFFFF;border-color:transparent;border-width:1px;border-style:solid;} #af-form-69035635{display:block;} #af-form-69035635{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-quirksMode .af-element{padding-left:0!important;padding-right:0!important;} .lbl-right .af-element label{text-align:right;} body { } &lt;/style&gt; &lt;form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" &gt; &lt;div style="display: none;"&gt; &lt;input type="hidden" name="meta_web_form_id" value="69035635" /&gt; &lt;input type="hidden" name="meta_split_id" value="" /&gt; &lt;input type="hidden" name="listname" value="4pregnantatlast" /&gt; &lt;input type="hidden" name="redirect" value="http://pregnantatlast.com/welcome.hmtl" id="redirect_6f08e83ce4f3bc074b25117c5105d14d" /&gt; &lt;input type="hidden" name="meta_redirect_onlist" value="http://pregnantatlast.com/welcome.hmtl" /&gt; &lt;input type="hidden" name="meta_adtracking" value="Pregnant_At_Last_Form" /&gt; &lt;input type="hidden" name="meta_message" value="1" /&gt; &lt;input type="hidden" name="meta_required" value="name,email" /&gt; &lt;input type="hidden" name="meta_tooltip" value="" /&gt; &lt;/div&gt; &lt;div id="af-form-69035635" class="af-form"&gt; &lt;div id="af-body-69035635" class="af-body af-standards"&gt; &lt;div class="af-element"&gt; &lt;label class="previewLabel" for="awf_field-42946097"&gt;Name: &lt;/label&gt; &lt;div class="af-textWrap"&gt; &lt;input id="awf_field-42946097" type="text" name="name" class="text" value="" tabindex="500" /&gt; &lt;/div&gt; &lt;div class="af-clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="af-element"&gt; &lt;label class="previewLabel" for="awf_field-42946098"&gt;Email: &lt;/label&gt; &lt;div class="af-textWrap"&gt; &lt;input class="text" id="awf_field-42946098" type="text" name="email" value="" tabindex="501" /&gt; &lt;/div&gt; &lt;div class="af-clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="af-element buttonContainer"&gt; &lt;input name="submit" id="af-submit-image-69035635" type="image" class="image" style="background: none;" alt="Submit Form" src="http://www.pregnantatlast.com/Assets/Images/button_arrow3.jpg" tabindex="502" /&gt; &lt;div class="af-clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="display: none;"&gt;&lt;img src="http://forms.aweber.com/form/displays.htm?id=bJwMzKxszKw=" alt="" /&gt;&lt;/div&gt; &lt;/form&gt; &lt;script type="text/javascript"&gt; &lt;!-- (function() { var IE = /*@cc_on!@*/false; if (!IE) { return; } if (document.compatMode &amp;&amp; document.compatMode == 'BackCompat') { if (document.getElementById("af-form-69035635")) { document.getElementById("af-form-69035635").className = 'af-form af-quirksMode'; } if (document.getElementById("af-body-69035635")) { document.getElementById("af-body-69035635").className = "af-body inline af-quirksMode"; } if (document.getElementById("af-header-69035635")) { document.getElementById("af-header-69035635").className = "af-header af-quirksMode"; } if (document.getElementById("af-footer-69035635")) { document.getElementById("af-footer-69035635").className = "af-footer af-quirksMode"; } } })(); --&gt; &lt;/script&gt; &lt;!-- /AWeber Web Form Generator 3.0 --&gt; &lt;/div&gt; &lt;!--End form--&gt; &lt;div id="button_ttl"&gt; Successful Pregnancy&lt;br /&gt; Starts Here &lt;/div&gt; &lt;!--End button_ttl--&gt; &lt;/div&gt; &lt;!--End formbox--&gt; &lt;div id="arrow"&gt; &lt;img src="Assets/Images/red-arrow.png" width="252" height="415" alt="Arrow" /&gt; &lt;/div&gt; &lt;!--End arrow--&gt; &lt;!--End content--&gt; &lt;/div&gt; &lt;!--End content--&gt; &lt;/div&gt; &lt;!--End content--&gt; &lt;/div&gt;&lt;!--End content_bg--&gt; &lt;!-- InstanceEndEditable --&gt; &lt;div id="footer"&gt; &lt;div id="ft_menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="service.html"&gt;Terms of Service&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="disclaimer.html"&gt;Disclaimer&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="sitemap.html"&gt;Site Map&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="privacy.html"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--End ft_menu--&gt; &lt;div id="foot_txt"&gt; Pregnant At Last&lt;br /&gt; 4043 Mahinahina Pl.&lt;br /&gt; Lahaina, HI 96761&lt;br /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;!-- InstanceEnd --&gt;&lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload