My HTML text boxes aren't aligning with my button and my timer isn't showing?

First off, I’d like to not that this is not only an issue for me in Google Chrome, but also in other web browsers such as Firefox and Internet Explorer. I’m trying to get my two text boxes to align properly with my button below and my countdown timer to display right underneath the header, but for some reason, nothing seems to work for me. I’ve tried changing my div display to block. Here is a picture of what it looks like right now on my website:

Here is the code for it:

<div id="worked">&nbsp;</div>
<h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1>
<h1 id="time" style="text-align: center;">&nbsp;</h1>
<p>&nbsp;</p>
<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
  <div style="display: none;">
    <input name="meta_web_form_id" type="hidden" value="604218668" />
    <input name="meta_split_id" type="hidden" value="" />
    <input name="listname" type="hidden" value="awlist4661276" />
    <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true" />
    <input name="meta_adtracking" type="hidden" value="My_Web_Form" />
    <input name="meta_message" type="hidden" value="1" />
    <input name="meta_required" type="hidden" value="name,email" />
    <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." />
  </div>
  <div id="af-form-604218668" class="af-form">
    <div id="af-body-604218668" class="af-body af-standards">
      <div class="af-element">
        <label class="previewLabel" for="awf_field-90534028"></label>
        <div class="af-textWrap" style="display: block; text-align: center;">
          <input id="awf_field-90534028" class="text" style="display: block; width: 450px; text-align: left;" tabindex="500" name="name" type="text" value="First Name..." />
        </div>
      </div>
      <div class="af-element" style="display: block; text-align: center;">
        <label class="previewLabel" for="awf_field-90534029"></label>
        <div class="af-textWrap" style="display: block; text-align: center;">
          <input id="awf_field-90534029" class="text" style="display: block; width: 450px; position: center;" tabindex="500" name="email" type="text" value="Best Email..." />
        </div>
      </div>
      <div class="af-element buttonContainer" style="text-align: center;">
        <input id="af-submit-image-604218668" class="image" style=" background: none; max-width: 100%; width: 450px position: center;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/>
      </div>
      <div class="af-element privacyPolicy" style="text-align: center;">
        <p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
        <div class="af-clear">&nbsp;</div>
      </div>
    </div>
  </div>
  <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" />
  </div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
<script>
  // <![CDATA[
  var handler = function() {
    if (--sec < 0) {
      sec = 59;
      if (--min < 0) {
        min = 0;
        sec = 0;
      }
    }
    var min1 = "0" + min + "m";
    var min2 = min + "m";
    var sec1 = "0" + sec + "s";
    var sec2 = sec + "s";
    var col = ":";
    min1 = min1.fontcolor("red");
    min2 = min2.fontcolor("red");
    sec1 = sec1.fontcolor("red");
    sec2 = sec2.fontcolor("red");
    col = col.fontcolor("red");
    document.getElementById("time").innerHTML = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
  };
  var sec = 0;
  var min = 15;
  handler();
  setInterval(handler, 1000);
  // ]]>

</script>

Hi there josephlewandowski,

and a warm welcome to these forums. :sunglasses:

Does this help…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/2em verdana, arial, helvetica, sans-serif;
 }
h1,h2 {
    font-size: 2em;
    color: #f00;
    text-align: center;
    text-shadow: 0 0 0.06em #000,0 0 0.12em #000;
 }
.af-textWrap {
    display: block; 
    text-align: center;
 }
.af-element {
  text-align: center;
 }
#awf_field-90534028,
#awf_field-90534029 {
    display: block; 
    width: 98%;
    max-width: 28.125em;
    margin: 0.75em auto;
    text-align: left;
 }
.image {
    display: block;
    width: 98%; 
    max-width: 30em;
    height: auto; 
    margin: auto;
 }
</style>

</head>
<body> 

<div id="worked">&nbsp;</div>
<h1>Offer Ends In:</h1>
<h2 id="time">&nbsp;</h2>

<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">

 <input name="meta_web_form_id" type="hidden" value="604218668">
 <input name="meta_split_id" type="hidden" value="">
 <input name="listname" type="hidden" value="awlist4661276">
 <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true">
 <input name="meta_adtracking" type="hidden" value="My_Web_Form">
 <input name="meta_message" type="hidden" value="1">
 <input name="meta_required" type="hidden" value="name,email">
 <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email...">

  <div id="af-form-604218668" class="af-form">
    <div id="af-body-604218668" class="af-body af-standards">

    <div class="af-element">
     <label class="previewLabel" for="awf_field-90534028">First Name:</label>
      <div class="af-textWrap">
       <input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name...">
      </div>
     </div>

    <div class="af-element">
     <label class="previewLabel" for="awf_field-90534029">Best Email</label>
       <div class="af-textWrap">
        <input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email...">
       </div>
     </div>

    <div class="af-element buttonContainer">
     <input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/>
    </div>

    <div class="af-element privacyPolicy">
     <p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
      <div class="af-clear">&nbsp;</div>
    </div>

    </div>
  </div>

  <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="">
  </div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
<script>
(function() {
   'use strict';
   var handler = function() {
    if (--sec < 0) {
        sec = 59;
    if (--min < 0) {
        min = 0;
        sec = 0;
      }
    }
   var min1 = '0' + min + 'm';
   var min2 = min + 'm';
   var sec1 = '0' + sec + 's';
   var sec2 = sec + 's';
   var col = ':';
   document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
  };
  var sec = 0;
  var min = 15;
  handler();
  setInterval(handler, 1000);
}());
</script>
</body>
</html>

coothead

2 Likes

Wow, thanks! It actually stands out a lot better too! All I need to do is remove the spacing between the timer and the form and it’s done! Much appreciated!:smiley:

Hi there

[quote]"All I need to do is remove the spacing between
the timer and the form and it’s done! "
[/quote]

Start with this…

h2 {
   margin-bottom: 0; /*adjust value to suit */
 }

coothead

1 Like

Wait, how did you add the spacing between the timer and the first text box?

That spacing is applied by the line-height set in the <body> element.

body {
    font: 1em/2em verdana,arial,helvetica,sans-serif;
}
1 Like

Thanks!

I fixed it for desktop version, but the mobile version of it still seems to act as before. I just tried it on both Safari and Google Chrome. Here is what it looks like on Google Chrome:

You are showing an image in that screenshot and lots of white space above the “Offer Ends…” that I do not see. That means there is more code than we have available to us. If you can assemble a “working page” that demonstrates the issue, including the URL to the image, it will give us more insight into the issue. If you have the dev page on a server, a link to the site should work, too.

2 Likes

Right, sorry about that. The problem is, I have two boxes that I use two Wordpress Text widgets that accept HTML code. The first Text widget contains the code for an embedded video, the second contains the code for the countdown timer and the sign up form.

This is the embedded video code:

<script src="https://fast.wistia.com/embed/medias/6m7jisefgh.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_6m7jisefgh videoFoam=true" style="height:100%;width:100%">&nbsp;</div></div></div>

This is the code for the countdown timer and the sign up form:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em verdana, arial, helvetica, sans-serif;
    line-height: 0px;
 }
h1,h2 {
    font-size: 2em;
    color: #f00;
    text-align: center;
    text-shadow: 0 0 0.06em #000,0 0 0.12em #000;
 }
.af-textWrap {
    display: block; 
    text-align: center;
 }
.af-element {
  text-align: center;
 }
#awf_field-90534028,
#awf_field-90534029 {
    display: block; 
    width: 98%;
    max-width: 28.125em;
    margin: auto;
    text-align: left;
 }
.image {
    display: block;
    width: 98%; 
    max-width: 30em;
    height: auto; 
    margin: auto;
 }
</style>
</head>
<body> 
<div id="worked"></div>
<h1>Offer Ends In:</h1>
<h2 id="time"></h2>
<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
 <input name="meta_web_form_id" type="hidden" value="604218668">
 <input name="meta_split_id" type="hidden" value="">
 <input name="listname" type="hidden" value="awlist4661276">
 <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true">
 <input name="meta_adtracking" type="hidden" value="My_Web_Form">
 <input name="meta_message" type="hidden" value="1">
 <input name="meta_required" type="hidden" value="name,email">
 <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email...">
  <div id="af-form-604218668" class="af-form">
    <div id="af-body-604218668" class="af-body af-standards">
    <div class="af-element">
 <label class="previewLabel" for="awf_field-90534028"></label>
  <div class="af-textWrap">
   <input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name...">
  </div>
 </div>

<div class="af-element">
 <label class="previewLabel" for="awf_field-90534029"></label>
   <div class="af-textWrap">
    <input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email...">
   </div>
 </div>

<div class="af-element buttonContainer">
 <input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/>
</div>

<div class="af-element privacyPolicy">
 <p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
  <div class="af-clear">&nbsp;</div>
</div>

</div>
  </div>
  <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="">
  </div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
<script>
(function() {
   'use strict';
   var handler = function() {
    if (--sec < 0) {
        sec = 59;
    if (--min < 0) {
        min = 0;
        sec = 0;
      }
    }
   var min1 = '0' + min + 'm';
   var min2 = min + 'm';
   var sec1 = '0' + sec + 's';
   var sec2 = sec + 's';
   var col = ':';
   document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
  };
  var sec = 0;
  var min = 15;
  handler();
  setInterval(handler, 1000);
}());
</script>
</body>
</html>

josephlewandowski,

I am not going to guess how you assemble your code. Please show me the “working page” that produced the space at the mobile width in the sceen shot in post #8, if indeed that is the current problem.

OK, I took a guess… It seems probable that the space is where the wista thingy is located in your code and where video should be. The wista thing needs to be in a box with a limited width to limit its width and maintain its aspect ratio. The padding-top in “wistia_responsive_padding” determines the height of the box in relation to the width of its containing element… “wistabox” in my example. Change the width of “wistabox” to suit your layout.

FYI: setting the line-height to zero in the body element is not a very good idea. Leave the line-height at its default value (which is usually around 1.2 unitless depending on the font) and try reducing the adjacent top and bottom margins on a case-by-case basis. If you see an opportunity where the line-height can be inherited, by all means take advantage of it, but applying a fixed line-height globally via the body element is uncommon and line-height zero is very uncommon anywhere. FYI: a unitless line-height will adapt to different font-sizes whereas a line-height expressed in px will not. Choose your units of measure based on how they behave and how you want your page to behave. If you are not familiar with line-height, I highly recommend the following slide show:
http://www.maxdesign.com.au/articles/css-line-height/

Try this in your browser to see how the wista-thingy is supposed to work.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<!--
https://www.sitepoint.com/community/t/my-html-text-boxes-arent-aligning-with-my-button-and-my-timer-isnt-showing/262810/12

-->
<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em verdana, arial, helvetica, sans-serif;
    line-height: 0px;
 }
h1,h2 {
    font-size: 2em;
    color: #f00;
    text-align: center;
    text-shadow: 0 0 0.06em #000,0 0 0.12em #000;
 }
.wistabox {
    max-width:600px;
    margin:auto;
}
.af-textWrap {
    display: block; 
    text-align: center;
 }
.af-element {
  text-align: center;
 }
#awf_field-90534028,
#awf_field-90534029 {
    display: block; 
    width: 98%;
    max-width: 28.125em;
    margin: auto;
    text-align: left;
 }
.image {
    display: block;
    width: 98%; 
    max-width: 30em;
    height: auto; 
    margin: auto;
 }
</style>
</head>
<body> 

<script src="https://fast.wistia.com/embed/medias/6m7jisefgh.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistabox">
    <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;outline:2px dashed red;">
        <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
            <div class="wistia_embed wistia_async_6m7jisefgh videoFoam=true" style="height:100%;width:100%">&nbsp;</div>
        </div>
    </div>
</div>


<div id="worked"></div>
<h1>Offer Ends In:</h1>
<h2 id="time"></h2>
<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
 <input name="meta_web_form_id" type="hidden" value="604218668">
 <input name="meta_split_id" type="hidden" value="">
 <input name="listname" type="hidden" value="awlist4661276">
 <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true">
 <input name="meta_adtracking" type="hidden" value="My_Web_Form">
 <input name="meta_message" type="hidden" value="1">
 <input name="meta_required" type="hidden" value="name,email">
 <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email...">
  <div id="af-form-604218668" class="af-form">
    <div id="af-body-604218668" class="af-body af-standards">
    <div class="af-element">
 <label class="previewLabel" for="awf_field-90534028"></label>
  <div class="af-textWrap">
   <input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name...">
  </div>
 </div>

<div class="af-element">
 <label class="previewLabel" for="awf_field-90534029"></label>
   <div class="af-textWrap">
    <input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email...">
   </div>
 </div>

<div class="af-element buttonContainer">
 <input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/>
</div>

<div class="af-element privacyPolicy">
 <p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
  <div class="af-clear">&nbsp;</div>
</div>

</div>
  </div>
  <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="">
  </div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
<script>
(function() {
   'use strict';
   var handler = function() {
    if (--sec < 0) {
        sec = 59;
    if (--min < 0) {
        min = 0;
        sec = 0;
      }
    }
   var min1 = '0' + min + 'm';
   var min2 = min + 'm';
   var sec1 = '0' + sec + 's';
   var sec2 = sec + 's';
   var col = ':';
   document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
  };
  var sec = 0;
  var min = 15;
  handler();
  setInterval(handler, 1000);
}());
</script>
</body>
</html>
2 Likes

This is the link to it: http://bloggingnetworkonline.com/InternetMarketing/testwebsite/

I tried manipulating the line-height, but all that does for me is add more space between the title and the video.

Wordpress isn’t playing nice with you.

Your HTML shows 38 errors. The first error inside the textwidget is a paragraph tag followed by another open doctype :eek:

It looks like you copied and pasted selections from my last post - your code with a container added - and WP took in more than intended. This is a WP issue.

Run the validator on the test code on your site and you’ll see the errors.
https://validator.w3.org/nu/

:confounded::pensive: Figures. I barely know what I’m doing anyway. I’m not an HTML, CSS, or JavaScript programmer(I do know some Java though). I just tried to set this up in a way I could understand, but it looks like all I’m down to is this, Now what do I do? :neutral_face::construction: :tada:

You might have to give the WordPress instruction manual another read. Any time one uses a framework of any kind, he must obey the rules of the framework or risk frustration.

I will move this topic to the WordPress category. There should be someone along who can help with WordPress within a few hours. They can send it back to us if you need HTML/CSS assistance after getting WP in order. In the meanwhile, I’m serious about re-reading the WP instructions.

Just so ya know, the same expectation of strict adherence to the rules of the product would apply if you were using Bootstrap or any other framework.

Best of Luck.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.