We help IT Professionals succeed at work.

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

burnedfaceless
on
105 Views
Last Modified: 2017-03-06
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;
}

Open in new window


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

Open in new window

Screen-Shot.png
Comment
Watch Question

Consultant
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
I removed both paddings and it had no effect.

When I used Chrome developer tools I could not select the white space as an individual element it just kept showing up as body, so my first CSS declaration now sets the body background color to the footer's color.

Thanks, those dev tools are pretty cool.