Page renders strangely

[djg]

a.k.a - looking for free web consultancy

A page of mine renders strangly in Moz (and IE, which isnt saying much)
If you go to http://www9.brinkster.com/goodwin/caperdu/index.html and scroll to the bottom you will see large white spaces in the footer. Anyone have any idea why? The page validates as HTML4.01.

The offending code which creates the gaps...

<!-- Footer -->
<hr SIZE=1 CLASS="footer">
<center>

<font SIZE="1">
Le Caperdu Website (c) Copyright 2000-2003 Designed and created by David Goodwin<br>
<script TYPE="text/javascript" language="JavaScript">
document.write("This page was last modified on "+ document.lastModified);
</SCRIPT>
<!-- Counter -->
<img SRC="http://c2.thecounter.com/id=1409772" ALT="Counter Image" BORDER=0> since September 2000
<!-- End of Counter -->
<br>
Contact <a href="mailto:info@caperdu.com">info@caperdu.com</a> for further information.
</font>
<p>

<a href="http://validator.w3.org/check/referer"><img border="0"
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
</p>
</center>
<hr size=1 CLASS="footer">
<!-- End Footer -->

[laszlo]

You don't have a HTML problem, you've got a CSS problem. If you take this out (or use a reasonable value) it'll probably look like intended:

Code: Select all

BODY {
   font-size: 10em;
}

This means: use a font size ten times the computed font size of the parent element (the html element), which explains the large gaps. What I don't understand is that the font element you use in your footer only influences the font size in this case and not also the line height inside itself (on the line breaks).

[djg]

thx a lot - that solved it!