How do I remove this unnecessary spacing?

HTML & CSS
1

I have three gaps in this code that I’d like to remove, but I don’t know how to get rid of them. The gaps occur between the top edge to the countdown timer’s header, from the countdown timer to the first text box, and from the email privacy statement to the bottom edge. How can I get these removed so the page doesn’t look vertically lengthy?

Here is the code:

<!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: 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>
2

I don’t quite see what you are referring to. I loaded up the page in Chrome, Firefox, and Internet Explorer, and it appeared quite a short page to me. I even resized the page in all three browsers and found no problem. What browser are you using to view it?

3

I’m using Google Chrome. Here is a test website of me running the code on it: http://bloggingnetworkonline.com/InternetMarketing/testwebsite/

I am using the Text widget provided by Wordpress that allows me to embed HTML code into my website.

4

josephlewandowski,

This topic is a continuation of your previous topic
My HTML text boxes aren't aligning with my button and my timer isn't showing?

If you do not receive a reply to a question in a timely manner, please provide more information instead of starting a new topic.

Thank you.

1 Like
5

Okay.

6

It looks as if the other thread is active and making progress, so I’ll close this one to avoid duplication and confusion.

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

1 Like