Avatar of burnedfaceless
burnedfaceless
 asked on

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

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
* HTML 5CSS

Avatar of undefined
Last Comment
burnedfaceless

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
gr8gonzo

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
burnedfaceless

ASKER
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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck