I have read a lot of answers regarding this but it does not solve my problem. On the main page when I scrolled to the bottom, the footer has an extra space but it seems like the extra space below it is the background of my page. In other pages, the footer is okay. I think this happened because my main page has a short content. I actually cheated on its sidebar by adding margin bottom. Any help which applies to all browsers and any screen sizes that will fix this? Thanks!
This is the CSS of my footer:
#footerArea{
height:108px;
width:100%;
z-index:5;
background:url('../images/footerArea.jpg') #404042;
}
#footerPart{
height:48px;
width:988px;
margin:0 auto;
padding:0px;
background:url('../images/footerbg.jpg') no-repeat #404042;
}
#footerPart a {
text-decoration:none;
}
#footerLink{
margin:0 auto;
padding:15px 0px 0px 0px;
width:960px;
}
#footerLink ul{
list-style-type:none;
float:left;
}
#footerLink ul li{
display:inline;
margin:0px 5px 0px 0px;
}
#footerLink ul li a{
background:url('../images/footerbtn.jpg') no-repeat;
font-size:10px;
text-decoration:none;
padding:0px 0px 0px 15px;
}
EDITED:
This is from footer.php
<div id="footerArea">
<div id="footerPart">
<div id="footerLink">
<ul>
<li><a href="<?php bloginfo('url'); ?>?page_id=10">xxx</a></li>
<li> | </li>
<li><li><a href="<?php echo get_option('home'); ?>/?page_id=17">yyyy</a></li>
<li> | </li>
<li><a href="https://zzz.com" target="_blank">zzzzz</a></li>
<li> | </li>
<li><a href="http://aaa.com" target="_blank">aaaaaa</a></li>
</ul>
<p class="fR">SOME TEXTã<a href="http://www.somesite.php" target="_blank">ggggg</a></p>
</div>
</div>
</div>
</body>
</html>
I have tested it in Chrome, Firefox and IE but it has the same output.
Check if you have some kind of web tracking code or any other javascript (in javascript tags) at end of your document. Though it must be a few lines of javascript code, it sometimes takes-up space beneath footer in some browsers, especially in IE. If you can provide a codepen reference, we can review
In your HTML you have a
<li>tag embedded within another<li>which is invalidating your code, as it doesn’t have a closing tag.Short of that, it’s hard to debug such a vague problem as “Has extra space”. To provide further insight it would be great if you could provide a jsfiddle or something similar.
If you can’t provide that or don’t know how, I can offer some debugging tips. If you’re using google chrome to debug, you can go into your webkit inspector, or firebug if using firefox (Right click, “inspect element”) and look at the CSS and boxing for paticular elements.
If that fails and you still can’t figure out what’s causing the extra space, you can right click elements and begin deleting the ones that you think may be the root of the problem. Once an element is deleted it will no longer appear in your browser, so if you delete one and the problem persists, you can be comfortable knowing it wasn’t that element (or is multiple elements, but lets not get that complex.)