CODEWITHSUNDEEP
cssfooter
ismail vittal
ismail vittal

Reputation: 175

CSS - gap in footer

gap in between browser window and footer enter image description here

 #footer
 {
 text-align:center;
clear:both;
background: url("images/footer.png") repeat-x #8DC63F;
width:100%;
margin:0;
}


.footer-text 
{
padding: 10px 0 0;
white-space:nowrap;
font-family:'Tahoma';
font-size:10pt;
color: #000000;
}

HTML:

<div id="footer">
<p class="footer-text">Home | Services | About Us | Products | Contact Us</p> 
<p class="footer-text">2011 &copy; All Rights Reserved.</p>
<p class="footer-text">&nbsp;</p>
</div>

Help me to remove the extra space between browser window and footer

Upvotes: 3

Views: 1274

Answers (4)

Beto Aveiga
Beto Aveiga

Reputation: 3670

Try using overflow:hidden in #footer.

Also, It would be great if you give us a URL that shows the gap. The problem is that sometimes CSS rules can affect multiple elements, so it's hard to tell what's going on exactly without the entire code.

Hope that helps.

Upvotes: 3

Ehtesham
Ehtesham

Reputation: 2985

I will recommend you to use a separate div or br to clear the floating. That might solve your problem too. Otherwise remove any padding inside the footer to see if this is causing problems.

HTML

   <div class="clr"></div>
   <div id="footer">
      <p class="footer-text">Home | Services | About Us | Products | Contact Us</p> 
      <p class="footer-text">2011 &copy; All Rights Reserved.</p>
      <p class="footer-text">&nbsp;</p>
   </div>

CSS:

    .clr {
         clear:both;
     }

Upvotes: 0

Virendra
Virendra

Reputation: 2553

Remove the last <p class="footer-text">&nbsp;</p> to remove the gap.

Upvotes: 0

Scott
Scott

Reputation: 21882

Might be the syntax...

background: #8DC63F url("images/footer.png") repeat-x bottom center;

and

padding: 10px 0 0 0;

I would also remove the non-breaking space paragraph, there's no point to it. If you want more space at the bottom, add padding to the div. Don't use empty paragraphs.

Upvotes: 0

Related Questions