Search code examples
htmlcssfirefoxfooter

firefox is adding space after footer tag

This is not happening in chrome or ie. Firefox instead is adding 50px after my footer. with analyze element and firebug it is showing that that space is outside html tags. here is the link: http://www.sociallab.ro/index_romana Thanks!

html:

<html>
 <body>
  <div id="main">
  </div>
  <footer>
    <a href="http://www.messagelab.ro" target="_blank"><div class="message_lab"><img src="images/logo_mic.png" alt="Tineret in Actiune"/></div></a>
  </footer>
 </body>
</html>

css:

html{ 
 margin: 0;
 padding: 0;
}
footer{position:relative; 
 top: -50px; 
width:1060px; 
height:50px; 
overflow:hidden;
text-align: center;
margin:0 auto;
padding:0;}
body{
     margin-top:0px;
     margin:0 auto;
     padding:0;
     text-align: center;
     height: 1950px !important; 
background:url(../images/bg.png) left top repeat; }
Solution

  • A few things:

    1. There should not be a <div> tag inside <a> tag.
    2. There is a height for body and #wrap.
    3. For the footer, please remove the top: -50px; and replace it with negative margin as margin-top: -50px;.

    To make the footer link align center

    Without using div, use this way:

    <footer>
    <a target="_blank" href="http://www.messagelab.ro">
        <img alt="Tineret in Actiune" src="images/logo_mic.png">
    </a>
</footer>

    And CSS:

    footer a {display: block; text-align: center;}