appi2 - 10:05 am on Jun 23, 2008 (gmt 0)

In both the examples its the height of the footer div thats causing problems. Increase the font size in your browser to see it get worse.

Change the height from pixels to em to stop having this problem.

From your original code.

#footer {
font-size:1em;
background: #fff;
margin: 0;
border: 1px solid #000;
padding: 0.3em;
width: 100%; /*For KHTML*/
/*next line stops footer collapsing*/
overflow:hidden;
clear: both;
}
#footer ul {
margin: 0;
padding: 0px;
font: .7em/1em Helvetica, Verdana, Arial, sans-serif;
}
#footer li {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
padding: 0 10px;
border-right: 1px solid #000;
/*Next line using em so when user changes font size the text isnt cut*/
height: 1em;
}
#footer a:link, #footer a:visited {
text-decoration: none;
color: #000;
}
#footer a:hover {
text-decoration: underline;
color: #900;
}
#footer a:active {
color: green;
}