Firefox issue - if I scroll and then resize window, images disappear

Question

I have a page I am designing that is purely html with a css stylesheet. I have it set up with scrollable content with a header and footer somewhat like this example here: http://www.cssplay.co.uk/layouts/basics2.html except my header and footer consist of multiple images as opposed to text.

The issue I am having is that when I scroll down the page a little and resize the window to a smaller size, my header and footer disappear... but only in Firefox. When I maximize the window again, the footer appears but some 300-400-odd pixels too high and the header is still gone. Safari, Opera and Chrome all work fine; I can resize the browser window however much I want and my page reacts appropriately.

What could be causing this? The weird thing is that if I don't scroll at all, and then proceed to resize the window, Firefox retains my page's styling... possibly an overflow:scroll issue?

thanks everyone

sorry, i forgot to include my link: http://www.theskycaptain.com/THESKYCAPTAIN.COM/projects/cosmicwomb.html

(I realize that the bandcamp player isn't behaving properly and my codes a bit messy, but I'm in the midst of developing, I've just hosted it to sort out this issue: simply scroll down a bit, resize the window and then maximize and you will see what I mean)

Answer 1

Your webpage has an improperly defined img and br tags everywhere including other errors that need to be cleaned up.

Incorrect Example:

<img src="../image/topspace.png"></img>

Correct Example:

<img src="../image/topspace.png" alt="image" />

For more info on img tags, read here .

Also, change:

</br>

To:

<br />

Answer 2

Try giving top and bottom values to your absolutely positioned elements.

ie

.topspace, .headercon, .scroller { top: 0px; }
.footer { bottom: 0px; }

^{( These are not necessarily the exact values you'd want, but simply an example )}