Я настраиваю свой сайт в Wordpress, и у меня довольно неприятная проблема.
У меня есть отличная панель сайта с некоторыми виджетами.Когда я не реализую свой блок рассылки (который представляет собой скрипт Aweber - смотрите ниже), он выглядит великолепно.Однако, когда я его реализую, кажется, что HTML работает неправильно.
Тем не менее, когда я помещаю поле новостной рассылки как самый низкий из виджетов, оно также выглядит великолепно.Проблема в том, что мне нужно разместить новостную рассылку выше, чтобы получать больше потенциальных клиентов.
Графический пример:
Когда поле новостной рассылки внизу (и все выглядит великолепно): http://i52.tinypic.com/2w6gb3c.jpg
Когда поле для рассылки находится там, где оно должно быть (и все выглядит ужасно): http://i56.tinypic.com/no6ntd.jpg
Поэтому мой вопрос таков: как в мире я могу решить эту проблему? Я попытался исправить списки HTML, и это не похоже на отсутствующий закрывающий тег. И HTML кажется верным.
Техническая информация
Скрипт Aweberis:
<script type="text/javascript" src="http://forms.aweber.com/form/42/XXX.js"></script>
Это относится к HTML-форме, которая выглядит следующим образом:
<!-- AWeber Web Form Generator 3.0 -->
<style type="text/css">
#af-form-1560005742 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-1560005742 .af-body a{color:#700909;text-decoration:underline;font-style:normal;font-weight:normal;}
#af-form-1560005742 .af-body input.text, #af-form-1560005742 .af-body textarea{background-color:#FFFFFF;border-color:#BD965A;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-1560005742 .af-body input.text:focus, #af-form-1560005742 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
#af-form-1560005742 .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-1560005742 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:repeat-y;background-position:center left;background-image:url("http://forms.aweber.com/images/forms/memo/khaki/body.png");color:#000000;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-1560005742 .af-footer{padding-bottom:45px;padding-top:1px;padding-right:34px;padding-left:34px;background-color:transparent;background-repeat:no-repeat;background-position:bottom left;background-image:url("http://forms.aweber.com/images/forms/memo/khaki/footer.png");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#000000;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-1560005742 .af-header{padding-bottom:1px;padding-top:20px;padding-right:34px;padding-left:34px;background-color:transparent;background-repeat:no-repeat;background-position:top left;background-image:url("http://forms.aweber.com/images/forms/memo/khaki/header.png");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#8A1F0A;font-size:16px;font-family:Verdana, sans-serif;}
#af-form-1560005742 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
#af-form-1560005742 .af-quirksMode{padding-right:32px;padding-left:34px;}
#af-form-1560005742 .af-standards .af-element{padding-right:32px;padding-left:34px;}
#af-form-1560005742 .bodyText p{margin:1em 0;}
#af-form-1560005742 .buttonContainer input.submit{background-image:url("http://forms.aweber.com/images/auto/gradient/button/900.png");background-position:top left;background-repeat:repeat-x;background-color:#790000;border:1px solid #790000;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-1560005742 .buttonContainer input.submit{width:auto;}
#af-form-1560005742 .buttonContainer{text-align:left;}
#af-form-1560005742 body,#af-form-1560005742 dl,#af-form-1560005742 dt,#af-form-1560005742 dd,#af-form-1560005742 h1,#af-form-1560005742 h2,#af-form-1560005742 h3,#af-form-1560005742 h4,#af-form-1560005742 h5,#af-form-1560005742 h6,#af-form-1560005742 pre,#af-form-1560005742 code,#af-form-1560005742 fieldset,#af-form-1560005742 legend,#af-form-1560005742 blockquote,#af-form-1560005742 th,#af-form-1560005742 td{float:none;color:inherit;position:static;margin:0;padding:0;}
#af-form-1560005742 button,#af-form-1560005742 input,#af-form-1560005742 submit,#af-form-1560005742 textarea,#af-form-1560005742 select,#af-form-1560005742 label,#af-form-1560005742 optgroup,#af-form-1560005742 option{float:none;position:static;margin:0;}
#af-form-1560005742 div{margin:0;}
#af-form-1560005742 fieldset{border:0;}
#af-form-1560005742 form,#af-form-1560005742 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1560005742 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-1560005742 input,#af-form-1560005742 button,#af-form-1560005742 textarea,#af-form-1560005742 select{font-size:100%;}
#af-form-1560005742 p{color:inherit;}
#af-form-1560005742 select,#af-form-1560005742 label,#af-form-1560005742 optgroup,#af-form-1560005742 option{padding:0;}
#af-form-1560005742 table{border-collapse:collapse;border-spacing:0;}
#af-form-1560005742 ul,#af-form-1560005742 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}
#af-form-1560005742,#af-form-1560005742 .quirksMode{width:275px;}
#af-form-1560005742.af-quirksMode{overflow-x:hidden;}
#af-form-1560005742{background-color:transparent;border-color:transparent;border-width:1px;border-style:none;}
#af-form-1560005742{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,.af-footer{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" target="_new" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="XXX" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="youfirmnet" />
<input type="hidden" name="redirect" value="http://www.youfirm.net/wait-you-are-not-done-yet/" id="XXX" />
<input type="hidden" name="meta_adtracking" value="XXXX" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1560005742" class="af-form"><div id="af-header-XXX" class="af-header"><div class="bodyText"><p><span class="Apple-style-span" style="font-size: 18px;"><strong>Quality Newsletter:</strong></span></p>
<p><span class="Apple-style-span" style="font-size: 13px;">I write when I've something <em>important to share</em>. <strong>No</strong> daily emails and <strong>no</strong> spam. </span><span class="Apple-style-span" style="font-size: 13px;"><strong>By signing up</strong>, you will receive my *MUST READ* e-book: How the world of business is changing.</span></p></div></div>
<div id="af-body-XXX" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-23759938">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-XX" type="text" name="email" value="" tabindex="500" />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Submit" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
<div id="af-footer-XX" class="af-footer"><div class="bodyText"><p> </p></div></div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=jKxsDAwMrOwsTA==" 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-X")) {
document.getElementById("af-form-XX").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-x")) {
document.getElementById("af-body-x").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-x")) {
document.getElementById("af-header-x").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-x")) {
document.getElementById("af-footer-X").className = "af-footer af-quirksMode";
}
}
})();
-->
</script>
<!-- /AWeber Web Form Generator 3.0 -->
HTML-код UGLY версии:
<div class="sidebar_widgets">
<ul>
<li id="categories-3" class="widget widget_categories"><h2 class="widgettitle">Blog Categories</h2><div class="widget_inner"> <ul>
<li class="cat-item cat-item-4"><a href="http://www.youfirm.net/category/cro/" title="When you have used either resources or money to attract visitors, you need to make money of these visitors. This category is all about how to convert the visitors into buyers.">Conversion Rate Optimization</a> (5)
</li>
<li class="cat-item cat-item-12"><a href="http://www.youfirm.net/category/experiments/" title="In this category a variety of experiments I've performed myself is shown.">Experiments</a> (1)
</li>
<li class="cat-item cat-item-11"><a href="http://www.youfirm.net/category/business/" title="This category covers some general advice and ideas. There are loads of different ideas you can use in your business - no matter what you are doing.">General Advice</a> (7)
</li>
<li class="cat-item cat-item-5"><a href="http://www.youfirm.net/category/gettingvisitors/" title="Getting a large amount of visitors is essential to any business - offline and online. In this category I cover new ideas and methods to get visitors. If you are looking for search engine optimization help, look under YouFirm Articles.">Getting Visitors</a> (5)
</li>
<li class="cat-item cat-item-9"><a href="http://www.youfirm.net/category/question-and-answers/" title="When people ask me questions using the Free advice page, I answer those questions. In this category you will see the questions asked and my answers to them.">Question and Answers</a> (7)
</li>
<li class="cat-item cat-item-3"><a href="http://www.youfirm.net/category/upsell/" title="To make more money, up-selling is very important. Getting customers will often be expensive, so when you have customers, it is essential you make money up-selling them. This is what makes the difference: Get customers to buy again and get them to buy more.">Upselling</a> (3)
</li>
<li class="cat-item cat-item-8"><a href="http://www.youfirm.net/category/website-feedback/" title="When people ask me about website feedback using the Free advice page, I tend to give some feedback! Here is some of the feedback posted.">Website Feedback</a> (2)
</li>
</ul>
</div></li><li id="text-4" class="widget widget_text"> <div class="textwidget"><script type="text/javascript" src="http://forms.aweber.com/form/42/1560005742.js"></script></div>
</div></li><li id="text-9" class="widget widget_text"><h2 class="widgettitle">YouFirm Membership</h2><div class="widget_inner"> <div class="textwidget"><b>This is the best I can offer</b>. This is my premium membership program which offers "how to" information. It covers how to get massive traffic, high conversions and generate massive up-sell.<br/><br/>
<a href="http://www.YouFirm.net/university" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://www.YouFirm.net']);" style="color:#9d080d; text-decoration: underline; font-weight:bold;">Read more about YouFirm University here</a>.</div>
</div></li> <li id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widgettitle">Recent Posts</h2><div class="widget_inner"> <ul>
<li><a href="http://www.youfirm.net/2011/08/is-social-media-really-for-anyone/" title="Is social media really for anyone?">Is social media really for anyone?</a></li>
<li><a href="http://www.youfirm.net/2011/08/buying-visitors-from-fiverr/" title="Buying visitors from Fiverr">Buying visitors from Fiverr</a></li>
<li><a href="http://www.youfirm.net/2011/08/do-the-unexpected/" title="Do the Unexpected">Do the Unexpected</a></li>
<li><a href="http://www.youfirm.net/2011/08/qr-codes-and-their-potential-exciting-designs/" title="QR Codes and their potential – Exciting designs">QR Codes and their potential – Exciting designs</a></li>
<li><a href="http://www.youfirm.net/2011/08/using-professional-newsletter-managers/" title="Using Professional Newsletter Managers">Using Professional Newsletter Managers</a></li>
<li><a href="http://www.youfirm.net/2011/08/q-is-it-easy-to-outrank-wikipedia-amazon-and-alike-in-google/" title="Q: Is it easy to outrank Wikipedia, Amazon and alike in Google?">Q: Is it easy to outrank Wikipedia, Amazon and alike in Google?</a></li>
<li><a href="http://www.youfirm.net/2011/08/310/" title="More and More Elderly People">More and More Elderly People</a></li>
<li><a href="http://www.youfirm.net/2011/08/getting-started-with-linkbuilding/" title="Getting started with linkbuilding">Getting started with linkbuilding</a></li>
<li><a href="http://www.youfirm.net/2011/08/what-are-personas-and-how-to-use-them/" title="What Are Personas and How to Use Them">What Are Personas and How to Use Them</a></li>
</ul>
</div></li><li id="text-8" class="widget widget_text"><h2 class="widgettitle">Who is behind YouFirm?</h2><div class="widget_inner"> <div class="textwidget">My name is Lars Holdgaard and I am a full time entrepreneur. Read all <a href="http://www.youfirm.net/about/" style="color:#9d080d; text-decoration: underline; font-weight:bold;">about me here</a>.<br/><br/>
<img src="http://i51.tinypic.com/24pe6gl.jpg" alt="Lars Holdgaard" title="Lars Holdgaard" width="150px" /></div>
</div></li> </ul>
</div>
</div>
</div>
Полный CSS: http://www.youfirm.net/wp-content/themes/SereneLiteTheme/style.css