Extra space on bottom of screen

Posted on 2006-04-27
Last Modified: 2012-08-13
On both Firefox and IE, extra space appears on the bottom of my webpage, causing scroll bars to appear even though everything fits on the screen.  The last item on the page is a large table.  I used w3c validator to check the html, and the only errors that came up were missing "alt" tags, which I doubt is related.  

Even more strange is this:  my page also has javascript pulldown menus on it and for some bizarre reason, when I expand one of the menus, the scroll bar disappears and the extra space goes away!

I know there's probably nothing any expert can do here without going through the actual html code (which is really too long to post), but I'm wondering if the symptoms I'm describing here at least SOUND like something familiar, or something somebody has experienced before, so that a few good suggestions are possible.

Anyway, any help at all would be appreciated.
Question by:chsalvia
    LVL 12

    Expert Comment

    by:Ian Gough
    Hmm could you post the url of the page or maybe upload the page so we can download it if its too big to post here.
    LVL 4

    Accepted Solution

    in my experience... there could be a number of things, and you're right, the code WOULD help.
    but still...we'll work with what we have.

    certain block elements (especially forms) can cause extra margining, so you need to specify in the stylesheet that those elements have a {margin:0px; }

    depending on the number of tables you have on your page, try setting the borders=1 (just for testing purposes) so you can see which cell the space is showing up in...if the table is indeed causing this. check and make sure you don't have a style in your stylesheet setting a margin or padding that would cause this.

    i've also had an occassion where one cell was taken up only by an <img>. in this case, you can see a little extra bit of space following below the <img> when it shouldn't have. to fix this, i had to set the <img> with an inline style (<img style="display:block; ">).
    setting the <img> with a block display helped clear out that space.

    just a few things to consider.
    LVL 3

    Expert Comment

    Sounds like the JS menu is causing a problem. It would be interesting if you could post the code for the JS menu (if not copyrighted) to see if there are any big offenders (I'm thinking of 100% height definitions here, or dodgy positioning)
    LVL 16

    Expert Comment

    Have your page displayed in IE and then View Source. Scroll to the bottom and see if you've got any <br> or <p> tags hanging around.

    Otherwise, I assume it's your TDs that are being funky. maybe a colspan or rowspan is off?

    Hard to tell without displaying code.. even if it IS long.
    LVL 4

    Expert Comment

    i seriously don't think all t his guess work is gonna go anywhere without some code...

    1. Select all the text in your code document

    2. Right-click. A pop-up menu will appear allowing you to "Copy" text.

    3. Once this is done, you can go to and:

    4. Inside of the comment textbox, right-click again, bringing up the pop-up menu, and go to "Paste". This will paste your code in the box allowing experts to view your code.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now