Scroll Bar and Bottom of Page

Sorry if this topic has been discussed in the past. I did try to search, but it doesn’t seem to be working. I tried three times, and it resulted only in a blank page with Firefox saying “Done” and the bottom!

Anyway, I would appreciate some insight into what is causing this: I have a page on which a scroll bar appears even though the page contents would actually fit on the opening Firefox window with no scroll bar needed. When I scroll down, it’s just blank space below my footer. On every other page on my site, either the page stops or the scrolling stops at the end of my footer.

What could cause a scroll bar to appear for a lot of blank space below my footer on one particular page?

Without posting a lot of code when it might not be needed, I will say this. The page in question has a ul at the top with five list items. Clicking one of them makes a hidden, absolute div change (via JavaScript) to visible, relative and appear just below the ul. Clicking another item, returns the first item to hidden, absolute, and the newly clicked item becomes visible, relative, replacing the previous material in the same place on the page. In the code itself, these five div’s follow the ul, one after the other.

It’s a nice effect, and everything works fine. I was proud of myself! But there’s all this extra space below my footer.

Any ideas?

Thanks.

Ken

Hi Ken, do you have a URL of your example?

Would be easier to see the problem in action

Sure. Thanks, Tom.

http://rediscoveringthebible.com/BookReviews.html

Ken

Hello Ken,

when you set an element to visibility:hidden, the space the element occupies is kept intact, hence why you have so much space below as all your book reviews are intact and sit there, just not visibly.

Do the test and remove your book review containers and see what happens.

In there I was saying that if an element has position:absolute on it, the parent will not know it is there. No element on the page will, not even other absolute elements.

I am at the college library right nwo and firebug isn’t installed so try Kohutek’s solution and see if it works :slight_smile:

Thanks, kohoutek. However…I’m not sure that’s correct. I started a lengthy thread in January on “relative” and “absolute” positioning:

In post #19, Ryan Reese said,

It prevents the parent from expanding because hte parent doesn’t even recognize it is there. Absolute elements are removed from the flow of the document and as such the parent has no idea it is there (nor do other elements, even other absolutes!)

This seems to say that an absolute div would take up no space at all, since it does not expand its parent.

Moreover, if you are correct, then the space taken up by the hidden absolute div’s should be before the footer and push it way down. In my case, the empty space is after the footer.

Of course, since I’m asking the questions, it’s clear I’m no expert. :slight_smile:

Ken

Yes, the experiment does work–in the sense that when I take out the five book review div’s, the page ends at the bottom of the footer the way it should. I was pretty sure that would happen, because I knew from when I wrote the page, that the problem began when I first put the absolute div reviews into the html page file. However, based on what I said in my previous post (#5), I just could understand why the absolute div’s would do that.

Also, I guess they don’t push the footer down because, as Ryan said, they DON’T expand the parent. They just “overwrite” whatever is “underneath” them.

And what determines the size of the empty space? The length of the longest review?

But now the question is whether there is some way around the problem. To me, it looks unprofessional to have a page with massive amounts of space below the footer!

I’d hide the book reviews only for those with Javascript enabled, meaning, I’d tell my Javascript function to append display:none; to all elements I don’t want to have displayed by default, then remove the display:none declaration when someone clicks on the respective book review link.

Yes, display: none worked beautifully! Thanks.

Since I have 5 book reviews so far, that added 25 lines of code.


   <li id="liBookReview4" class="white"
       onclick="document.getElementById('BookReview4').style.display='block';
                document.getElementById('BookReview4').style.visibility='visible';
                document.getElementById('BookReview4').style.position='relative';
                document.getElementById('BookReview1').style.display='none';
                document.getElementById('BookReview1').style.visibility='hidden';
                document.getElementById('BookReview1').style.position='absolute';
                document.getElementById('BookReview2').style.display='none';
                document.getElementById('BookReview2').style.visibility='hidden';
                document.getElementById('BookReview2').style.position='absolute';
                document.getElementById('BookReview3').style.display='none';
                document.getElementById('BookReview3').style.visibility='hidden';
                document.getElementById('BookReview3').style.position='absolute';
                document.getElementById('BookReview5').style.display='none';
                document.getElementById('BookReview5').style.visibility='hidden';
                document.getElementById('BookReview5').style.position='absolute';"
       onmouseover="changeToBlack('liBookReview4')"
       onmouseout="changeToWhite('liBookReview4')"
       style="cursor: pointer;">
       <i>The Distressing Days of the Judges</i> by Leon Wood (1975)
   </li>

Five lines had to be inserted in this li: one to turn on “display: block” for this review and four to turn on “display: none” for the other four reviews. Similarly, I inserted five lines in each of the remaining li’s.

I’m wondering if this is the most elegant way of doing things. The element Id’s on which each of these assignment statements operate are the div blocks that actually contain the reviews.

I gave some thought to using JavaScript functions to change these three css style values (display, visibility, and position), but I’m not sure it would save much coding when all is said and done. Is there anything “unprofessional” or “amateurish” in the way I’m doing this?

Thanks.

Ken

You might want to ask in the javascript line :).

You could do a loop and assign an array for each book review, and then loop through the 3 CSS changes :). Also you might want to not be obtrusive and get rid of the onclick event

The JS forum will patch you up :slight_smile:

I can see how a set of arrays might work, but I’m not sure that would save much coding either. However, it was an interesting idea. To quote Spock, “I shall consider it.”

However, I’m not sure I follow your point of doing away with the onclick feature. The idea is to allow the user to select the book he would like to review. My ul operates like a menu. It just uses onclick instead of “a href” since all the reviews are on the same page and only one review is to be visible at a time.

Ken

You can create JS that will work in <script> tags in the head section (or some external file) and will utilize the onclick without actually having to add onclick into the HTML.

It’s called unobtrusive Javascript so I recommend you head on over there for a more detailed learning :slight_smile:

Yesh, if you find yourself repeating lines like that, you know you’re prolly doing it the Hard Way (re the JS). What you’re looking for is called a “toggle”.

I agree with Ryan, you can get this looking nice in the JS section.