Search code examples
htmlcssfooterspace

Can't remove Whitespace at the bottom of my document


I seem to have this block of space generating each time I render the page. I have no idea how it appears there. Below is the image when I inspect in chrome, it happens in other browsers. It's an issue as its below my footer so I just have whitespace, no css seems to solve it, only directly deleting the space which is fine, but the space doesn't exist in my code.

My Code

   <body>
      <div id="wrapper">
        <div id="header">
        <img style="display:block; " src="assets/img/trinity.png" alt="trinityimage" />
              <ul style="width:100%;
                height:100px;
                background:url(assets/img/backg.png) repeat-x;
                list-style:none;
                margin:0;
                padding:0;
                text-align:center;" id="menu">
                <li class="selected"><a href="#" class="home"><span></span></a></li>
                <li><a href="#" class="aboutus"><span></span></a></li>
                <li><a href="#" class="team"><span></span></a></li>
                <li><a href="#" class="club"><span></span></a></li>
                <li><a href="#" class="spare"><span></span></a></li>
            </ul>

        </div>
        <div id="content">
        <div id="space"></div>
        <img style="padding:7px;" src="assets/img/newsite.png" align="left" alt="newsite"/>
        <p>Welcome to the Club homepage</p>!
        <div id="rightcolumn">
        <h3>Recent News!</h3>
           <ul style="font-size:9px; line-height:100%;">
           <li><p>Lorem ipsum dolor</p></li>
           <li><p>Lorem ipsum dolor</p></li>
           <li><p>Lorem ipsum dolor</p></li>
           <li><p>Lorem ipsum dolor</p></li>
           </ul>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>​

And the 'space' div has no effect on it, that is just a bit of space.


Solution

  • I have seen this phantom space a few times before, its something to do with a hidden character that gets added (usually from copy and paste). If you delete the closing </div></body></html> then re-type them in manually it may fix the problem.