DiscreteTomatoes DiscreteTomatoes - 10 days ago 7
CSS Question

Removing Small White Space Under Footer

I've been searching around for a solution to the small sliver of white space which has appeared below my footer but nothing seems to work. I've tried manipulating

margin-bottom
and
padding-bottom
to no avail.

The website with the footer is located here: website

The footer in question has a class name of "footerWrapper" and i hope that using the browser DOM editor will give you a better picture of the situation then if i just posted incomplete code. I have tried for a long time to fix this and any suggestions are greatly appreciated.

EDIT: Added code below (I PHP 'included' alot of code, including my footer which created weird formatting. Could this be my problem?)

<body class="body1">
<div class="borderLine"></div>
<div class="banner"></div>

<div class="mainContent1">
<div class="header1">
<div class="headerContainer">

<div class="headerPanelOuter">
<div class="headerPanel">

<p class="panelWelcome">Welcome,
log in or sign up! </p>

<div class="panelButton" id="logInBut">
<span>log in</span>
</div>

<form name="LogOutForm" id="LogOutForm" method="post" action="/app/newstuff.php" style="z-index: 5;">
<div class="panelButton" style="top: 34px;" onclick="SubmitLogOutForm()">
<span>log out</span>
</div>
<input name="LogOutState" type="hidden" value="1">
</form>

<div class="panelButton" onclick="location.href='signup.php';" style="top: 64px;">
<span>sign up</span>
</div>

<div class="panelButton" onclick="location.href='useraccount.php';" style="left: 4px; width: 90px;">
<span>my account</span>
</div>

</div>
</div>

<img class="KELogo" src="/../../images/PRLogo(header).png" alt="Logo">
<img class="KETitleLogo" src="/../../images/KENameLogo(header32).png" alt="People\'s Robotics">

<div id="blackBackg" style="display: none;"></div>
<div id="LogInBox" style="display: none;">
<p id="logEscape" onclick="">x</p>
<p id="logInTitle">Log In</p>
<div id="linediv2"></div>
<form name="logInForm" id="logInForm" method="post" action="/app/newstuff.php" style="z-index: 5;">
<span id="emailField">E-mail:</span>
<br><input id="logEmail" type="text" style="height: 28px;" name="logEmail" value="" onfocus="inputFocus(this)" onblur="inputBlur(this)"> <br><br>
<span id="passField">Password:</span> <br>
<input id="logPass" type="password" style="height: 28px;" name="logPass" value="" onfocus="inputFocus(this)" onblur="inputBlur(this)"> <br><br>
<input id="logSubmit" type="submit" name="logSubmit" value="Log In">
</form>
</div>

<ul class="navList1">
<li><a id="B0" href="/app/newstuff.php" style="background-color: rgb(30, 96, 217); color: rgb(249, 249, 249);">New Stuff</a></li>
<li><a id="B1" href="/app/products.php">Products</a></li>
<li><a id="B2" href="/app/projects.php">Projects</a></li>
<li><a id="B3" href="/app/faq.php">FAQ</a></li>
<li><a id="B4" href="/app/cart.php">My Cart</a></li>
</ul>
</div>
</div>

<div class="content1">
<div id="NSDiv1">

<div id="NSContentContainer">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" class="flex-active-slide" data-thumb-alt="">
<img src="/images/sh3.jpg" alt="1" draggable="false">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh1.jpg" alt="2" draggable="false" src="/images/sh1.jpg">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh2.jpg" alt="3" draggable="false">
</li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li><a href="#" class="flex-active">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div>
</section>
</div>

<div id="NSContentContainer" style=" top: 45px; left: 13px; width: 525px; height: 250px;z-index: 6;">
</div>

</div>

<!-------------------- DIV2----------------- -->
<div id="NSDiv2">

<div id="NSContentContainer" style="height: 250px;">
</div>

<div id="NSContentContainer" style=" top: 45px; left: 13px; width: 525px; height: 400px; ">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" class="flex-active-slide" data-thumb-alt="">
<img src="/images/sh2.jpg" alt="1" draggable="false">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh3.jpg" alt="2" draggable="false" src="/images/sh3.jpg">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh1.jpg" alt="3" draggable="false">
</li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li><a href="#" class="flex-active">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div>
</section>
</div>

</div>



</div>
</div>
<div class="footerWrapper">
<div class="footerInnerContainer">
<div id="footerSection1">

<img id="smlFB" src="/../../images/trans.png" alt="logo">
<img id="smlTW" src="/../../images/trans.png" alt="logo">
<img id="smlIN" src="/../../images/trans.png" alt="logo">
<img id="smlYT" src="/../../images/trans.png" alt="logo">

<div id="fsm1">

</div><div id="fsm2">

</div><div id="fsm3">

</div>


</div><div id="footerSection2">

<!-- <img src="/../../images/mysterychest1.jpg" alt="0" style="position: absolute; left: 25px; top: 13px;">
<img src="/../../images/mysterychest(top2).png" alt="0" style="position: absolute; left: 25px; top: 4px;">-->
<!-- <span style="position: absolute; top: 175px; left: 100px; font-size: 16px;">Hobbiests serving Hobbiests</span>-->
</div><div id="footerSection3">


<form>
<span>Something to say?</span>
<textarea rows="5" cols="30" name="userMessage"> </textarea>
<span>Topic:</span>
<select>
<option>Bug report</option>
<option>Suggestions</option>
<option>Other</option>
</select>
<span>Email Address:</span>
<input type="text" name="UserEmail">
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<link rel="stylesheet" href="/../FlexSlider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="/../FlexSlider/jquery.flexslider-min.js"></script>

<script>

$(window).load(function () {
$('.flexslider').flexslider({
touch: true,
slideshow: true,
controlNav: true,
directionNav : true,
slideshowSpeed: 6000,
animationSpeed: 600,
initDelay: 0,
pauseOnAction: true,

start: function(slider) { // fires when the slider loads the first slide
var slide_count = slider.count - 1;

$('.slides').on('click', function () {
$(this).siblings('.flex-direction-nav').children('li').children('a.flex-next').trigger('click');
});

$(slider)
.find('img.lazy:eq(0)')
.each(function() {
var src = $(this).attr('data-src');
$(this).attr('src', src).removeProp('data-src');
});
},
before: function (slider) { // fires asynchronously with each slider animation
var slides = slider.slides,
index = slider.animatingTo,
$slide = $(slides[index]),
$img = $slide.find('img[data-src]'),
current = index,
nxt_slide = current + 1,
prev_slide = current - 1;

$slide
.parent()
.find('img.lazy:eq(' + current + '), img.lazy:eq(' + prev_slide + '), img.lazy:eq(' + nxt_slide + ')')
.each(function () {
var src = $(this).attr('data-src');
$(this).attr('src', src).removeProp('data-src');
});
},
// default setting
after: function(slider) {
/* auto-restart player if paused after action */
if (!slider.playing) {
slider.play();
}
}
});
});
</script>

<script>
function checkUrl(url) {
switch (url) {

case "":
return 1;
break;
case "newstuff.php": //REMOVE THIS AFTER
return 1;
break;
case "products.php":
return 2;
break;
case "projects.php":
return 3;
break;
case "faq.php":
return 4;
break;
case "cart.php":
return 5;
break;
}
}

$(document).ready(function () {

var array = window.location.pathname.split('/');
var lastsegment = array[array.length - 1];
$("ul.navList1 > li:nth-child(" + checkUrl(lastsegment) + ") > a").css({ "background-color": "#1E60D9", "color": "#f9f9f9" });

$("#logInBut").click(function () {
$("#LogInBox").fadeIn(1000);
$("#blackBackg").fadeIn(1000);
});
$("#blackBackg").click(function () {
$("#LogInBox").fadeOut(1000);
$("#blackBackg").fadeOut(1000);
});
$("#logEscape").click(function () {
$("#LogInBox").fadeOut(1000);
$("#blackBackg").fadeOut(1000);
});

$(".panelButton").mouseenter(function () {
$("span", this).css("color", "#f9f9f9");
$(this).css("background-color", "transparent");
});

$(".panelButton").mouseleave(function () {
$("span", this).css("color", "#222423");
$(this).css("background-color", "#f9f9f9");
});

$("ul.navList1 > li").mouseenter(function () {
$("a", this).css({ "background-color": "#1B4DA9", "color": "#f9f9f9" }); //#1B4DA9 , #001E56
});

$("ul.navList1 > li").mouseleave(function () {
$("a", this).css({ "background-color": "transparent", "color": "#1e1e1e" });

var array = window.location.pathname.split('/');
var lastsegment = array[array.length - 1];
$("ul.navList1 > li:nth-child(" + checkUrl(lastsegment) + ") > a").css({ "background-color": "#1E60D9", "color": "#f9f9f9" });
});
});

function navButtonHighlight() {
var url = window.location.pathname;
if (url == "/Template.php") {
document.getElementById("LogOutForm")
}
}

function SubmitLogOutForm() {
document.getElementById("LogOutForm").submit();
}
</script>

</body>

Answer

Well this is because of overflow, you need to use overflow:hidden in your css like this

.footerWrapper {
   overflow:hidden;
}

It'll be all fine

Comments