<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>height claculation bug in nested absolute positioned elements</title>
		<style type="text/css">
		html, body { margin:0;}
		div { position:absolute; border: 1px solid gray; margin:0; }
		</style>
	</head>
	<body>
		<!-- <div style="top: 100px; height:80%; left: 50px; width:80% ">  this setting gives correct calculation -->
		<div style="top: 100px; bottom: 100px; left: 50px; right:50px ">
			<div style="top:10%;height:80%; width:80%; border-color: red">
				<img src="resources/icon-gold.png" alt="" style="height:100%; width:auto;" />
				<!-- <img src="http://webkit.org/images/icon-gold.png" alt="" style="height:auto; width:100%;" />  this is ok -->
			</div>
		</div>
	</body>
</html>