CODEWITHSUNDEEP
htmlcsswebfooter
Chris S
Chris S

Reputation: 249

Problems eliminating white space under footer

I have been inspecting my footer in Firebug and can't seem to see the issue that is causing my footer to have white space under it. If someone could take a quick look that would be great. Thanks!

www.jobspark.ca

#page-footer-wrapper {
border-top: 1px solid #e6e6e6;
background: #000;
color: #fff;
width: auto;
margin: 0;
}

Update So the answer that I accepted below has fixed the issue in all browsers except when I view in IE 9. What do I need to add to the css so it works with IE.

Upvotes: 1

Views: 2335

Answers (4)

Airen
Airen

Reputation: 2169

you add the font-size:0, like this:

header:after, section:after, article:after, footer:after, #navigation-top:after, #navigation-bottom:after, #page-header-wrapper:after, #banner-area-wrapper:after, #page-body-wrapper:after, #page-footer-wrapper:after, .clearer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
**font-size: 0;**
}

enter image description here

Upvotes: 1

ralph.m
ralph.m

Reputation: 14365

This is the clearfix method I use these days:

header:after,
section:after,
article:after,
footer:after,
#navigation-top:after,
#navigation-bottom:after,
#page-header-wrapper:after,
#banner-area-wrapper:after,
#page-body-wrapper:after,
#page-footer-wrapper:after,
.clearer:after {
  content: "";
  display: table;
  clear: both;
}

Upvotes: 1

Airen
Airen

Reputation: 2169

Problem here：

header:after, section:after, article:after, footer:after, #navigation-top:after, #navigation-bottom:after, #page-header-wrapper:after, #banner-area-wrapper:after, #page-body-wrapper:after, #page-footer-wrapper:after, .clearer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

you will add font-size:0 to fix the bug. and you will another clear float method:

.clearfix:before,
.clearfix:after {
   content:"";
   display: table;
}
.clearfix:after{
  clear:both;
  overflow: hidden;
}
.clearfix{
  zoom: 1;/*for ie6*/
}

If you want to know the method, please click here：clear float

Upvotes: 0

luke2012
luke2012

Reputation: 1734

The problem is in your clear, the height:0; property.

header:after, section:after, article:after, footer:after, #navigationtop:after, #navigation-bottom:after, #page-header-wrapper:after, #banner-area-wrapper:after, #page-body-wrapper:after, #page-footer-wrapper:after, .clearer:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

Upvotes: 1

Related Questions