The following works in all browsers but does not work in HtmlRenderer. I am trying to render multiple overlay images but can't.
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
position:relative;
width: 100%;
height: 100%;
background-color: #42413C;
margin: 0 auto;
}
.stretch {
width:100%;
height:100%;
}
.pointer{
width: 8%;
height: 8%;
position:absolute;
margin-left:-4%;
margin-top:-4%;
}
#main_image{
width: 100%;
height: 100%;
}
#overlay_image{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
</style></head>
<body>
<div class="container">
<div id="main_image"><img src="main.png" class="stretch"/></div>
<div id="overlay_image"><img src="overlay.png" class="stretch"/></div>
<div id="overlay_image"><img src="pointer.png" class="pointer" style="left:53.7%; top:24.1%;"/></div>
</div>
</body>
</html>
```
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
position:relative;
width: 100%;
height: 100%;
background-color: #42413C;
margin: 0 auto;
}
.stretch {
width:100%;
height:100%;
}
.pointer{
width: 8%;
height: 8%;
position:absolute;
margin-left:-4%;
margin-top:-4%;
}
#main_image{
width: 100%;
height: 100%;
}
#overlay_image{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
</style></head>
<body>
<div class="container">
<div id="main_image"><img src="main.png" class="stretch"/></div>
<div id="overlay_image"><img src="overlay.png" class="stretch"/></div>
<div id="overlay_image"><img src="pointer.png" class="pointer" style="left:53.7%; top:24.1%;"/></div>
</div>
</body>
</html>
```