CSS-höjdproblem med Safari

http://www.heaven7.se/test.asp

Det där ser bra ut på IE6 och IE7. Med bra menar jag att den turkosa bakgrunden går hela vägen ner till botten.

Men på MAC och med Safari blir det inte alls så. Vad har jag gjort för fel?

html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, Verdana, sans-serif;
	font-size: 8pt;
	color: #353535;
}

#wrap {
	background: #E7E5E5;
	margin: 0 auto;
	padding: 0;
	width: 880px;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	min-height: 100%;	
  	height: auto !important;	
  	height: 100%;   
}

#main {	
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 860px;	
	height: auto !important;
	background-color: #00ffcc;
}
	
#header {	
	width: 880px;
	border-bottom: 1px solid #000000;
	background-color: #ff2233;
	height: 100px;
}

#topmenu {	
	height: 28px;
	border-bottom: 1px solid #000000;
}

#left_1 {
	width: 496px;
	float: left;
	background-color: #ff0c0c;
}

#right_1 {
	padding-left: 5px;
	padding-right: 5px;
	width: 187px;
	float: left;
	background-color: #dd0aba;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>	
	<link rel=stylesheet href="css/css2.css" type="text/css">
	<title>Test</title>	
</head>

<body>

<div id="wrap">

	<div id="header">
    
    		
	</div>
    
	<div id="topmenu">    
		
		
	</div>
 
	<div id="main">
	
		<div id="left_1">
	
		text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>
		text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>
		
		</div>
		
		<div id="right_1">
	
		text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>text<br><text<br>
		
		</div>
		
	</div>
	
</div>

</body>
</html>