troubleshooting Question

Why am I getting this white space between my section and my footer?

Avatar of burnedfaceless
burnedfaceless asked on
* HTML 5CSS
2 Comments1 Solution110 ViewsLast Modified:
I've experimented with margins and padding to no avail. Understand the box model. What is going on here?

header {
    background-color: #C05746;
    padding-top: 10px;
    padding-bottom: 25px;
    border-bottom: black solid 3px;
    color: gainsboro;
}

h1,
h2,
h3 {
    text-align: center;
}

section {
    padding-top: 1px;
    background-color: #ADC698;
    border-bottom: black solid 3px;
    color: black;
    height: 400px;
}


form {
    padding-top: 50px;
}

.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#form-button {
    margin-top: 10px;
}

footer {
    background-color: #493B2A;
    height: 213px;
}

footer p {
    text-align: left;
    color: ghostwhite;
    padding-top: 30px;
    font-size: 1.1em;
    padding-bottom: 3px;
}

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Enter the number of numbers you need to determine the Greatest Common Factor and Least Common Denominator for</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
  <script>

      function generateHTML(number) {
      var master_markup = '<h3>Enter ' + number + ' numbers to find the Greatest Common Factor';
          master_markup += ' and Least Common Denominator.<br><br>';
      var html1 = '<input name="number[]';
      var html2 = '" type="text" size="3" id="number[]';
      var html3 = '">';
      var hidden_input = '<input type="hidden" name="quantity" value="' + number + '">';
      var submit_button = '<input type="submit" value="submit">';
      var i = 1;
      while (i <= number) {
          master_markup += html1 + html2 + html3;
          if (i == number) {
          master_markup += hidden_input;
              master_markup += submit_button;
          }
          i++;
      }
      return master_markup;
      }

    function getNumber() {
      var number = document.getElementById('number');
        var number_value = number.value;
        return number_value;
    }

    function master(){
        var number = getNumber();
        if (Number(number) === parseInt(number)) {
          if (2 > number) {
            alert('The number must be two (2) or higher.');
          }
          else if (number > 10) {
            alert('The number must be less than eleven (11).');
          }
          else {
            var html = generateHTML(number);
              document.getElementById('form-inputs-and-submit').innerHTML = html;
          }
      } else {
            alert('You must enter a whole number/integer.');
        }
    }
  </script>
</head>
<body>
  <header>
    <h1>This website computes the Greatest Common Factor (GCF) and Least Common Denominator (LCD) for a group of numbers.</h1>
  </header>
  <section>
    <h2>It needs to know how many numbers you want to find the GCF and LCD for.</h2>
    <h3>Please enter a number between two (2) and ten (10) to move forward.</h3><h3>They must be whole numbers.</h3>
    <form name="theform" action="process.php" method="post" id="theform">
    <div id="form-inputs-and-submit">
      <input name="number" type="text" class="center" size="2" id="number">
      <button type="button" id="form-button" class="center" onclick="master()">Click to Generate Form</button>
    </div>
    </form>
  </section>
  <footer>
    <p>
      Thank you for using this website.<br> It uses HTML5, CSS3, JavaScript and PHP.<br> Everything except PHP is interpreted by the browser,
      which is on your computer.<br> PHP is interpreted by the server, which is the computer your computer is connected to when you view
      this site.<br> PHP is suited to certain tasks for 2 reasons. <br>First of all it runs on the server and users can't
      prevent its execution by disabling it in their browser like JavaScript. <br>Second it can work with databases and create sessions
      which makes HTML stateless no more.<br><br>
    </p>
</body>
</html>
Screen-Shot.png
ASKER CERTIFIED SOLUTION
gr8gonzo
Consultant

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros