Strange result with page footer

[Anthony Delorenzo]

I am getting a strage result with this valid XHTML and
CSS webpage: http://www.sfu.ca/~ajdelore/

For some reason, the footer appears too low on the page.
When I click refresh it moves up into the correct spot.
This happens on more than one browser, so it isn't just
a weird glitch.

Can anyone explain why this happens, and suggest a fix?

CSS snippets here. As you can see, there should be a 2em
bottom margin on the floating content box, and no margin
on the footer element.

#content {
margin: 0 0 2em 9em;
padding: 0 0 0 2em;
border-left: 1px rgb(200,200,200) solid;
width: auto;
}

#footer {
margin: 0;
text-align: right;
border-top: 1px rgb(200,200,200) solid;
font-size: xx-small;
clear: both;
}

Thanks,
Anthony

[Jim Moe]

Anthony Delorenzo wrote:

For some reason, the footer appears too low on the page.
When I click refresh it moves up into the correct spot.
This happens on more than one browser, so it isn't just
a weird glitch.

Can anyone explain why this happens, and suggest a fix?

Yes, that's a good one.
The only way I could replicate the extra space was by flushing the
cache which forces the browser to load the image from remote. My WAG is
that because you do not specify a width or height for the image, the
browser is (incorrectly?) allowing some extra space at the bottom. When
loading from cache, it knows what the image's dimensions are.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)