Firefox & IE Height Difference

Hi guys,

I've been trowling through these forums for a while now and although I see parts of my problem discusses I just can't find an exact remedy.

My site (www.totalbrisbane.com) is encassed in a pageframe div which I want to expand to the bottom of the page if there isn't enough data to do so. IE goes too far and FF not far enough.

body{
	font-family: Arial,sans-serif;
	line-height: 1.166;	
	background-image: url(images/bg2.jpg);
	background-repeat: repeat-y;
	background-position: center;
	background-color: #333366;
	margin: 0px;
	padding: 0px;	
	height: 100%;
} 
html>body {
	height: 100%;
}

#pageframe{
	width: 900px;
	height: 100%;
	background: #fff;
	border: 1px solid #cccccc;
	voice-family: "\"}\"";
	voice-family: inherit;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	margin-top:0;	
	}
html>body #pageframe
    {
    width: 900px;
	height: 100%;
    w\idth: 900px;
    }	
	
#content{
	float:left;
	height: 100%;
	width: 80%;
	margin: 0px;
	padding: 15px 0 0 0;
	background-image: url(images/contentbg.gif);
	background-position: top;
	background-repeat: repeat-x;
} 
html>body #content {
	height: 100%;
}

HTML:

Thanks in advance for any advice you guys might have.

 

Part II:

While you're at it, have a look at a restaurants data and on the right you'll see an option to 'Find a route'. Why is the text stacking like that? If you get to this page via the breadcrumb it's fine though.

PS This is only a problem in IE