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;
}
<!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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.