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>
```
Comments: I found a workaround, but it required fixing a bug in HtmlRender. I haven't yet tested the "pointer" example in the original post yet, but I'm getting closer. in FlowBox() ``` if (b.Position == CssConstants.Absolute) { CssLength left = new CssLength(b.Left); CssLength top = new CssLength(b.Top); word.Left = left.ConvertToPixels(box.ActualWidth, new CssLength(box.MaxWidth)) + box.ActualMarginLeft; word.Top = top.ConvertToPixels(box.ActualHeight, new CssLength(box.MaxWidth)) + box.ActualMarginTop; } ``` A added ConvertToPixels() which is basically this: ``` public float ConvertToPixels(float boxWidth, CssLength maxWidth) { float finalValue = 0; if (Number > 0 && Unit == CssUnit.Pixels) { finalValue = Number; } else if (Number > 0 && IsPercentage) { finalValue = Number * boxWidth; } if (maxWidth.Number > 0) { float maxWidthVal = -1; if (maxWidth.Unit == CssUnit.Pixels) { maxWidthVal = maxWidth.Number; } else if (maxWidth.IsPercentage) { maxWidthVal = maxWidth.Number * boxWidth; } if (maxWidthVal > -1 && finalValue > maxWidthVal) { finalValue = maxWidthVal; } } return finalValue; } ``` Now, ABSOLUTE images don't wrap like they did. ``` <!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%; } .overlay_image{ position: absolute; top: 80px; left: 80px; width: 100%; height: 100%; } </style></head> <body> <div class="container"> <img src="main.png" class="stretch"/> <img src="overlay.png" class="overlay_image"/> </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>
```
Comments: I found a workaround, but it required fixing a bug in HtmlRender. I haven't yet tested the "pointer" example in the original post yet, but I'm getting closer. in FlowBox() ``` if (b.Position == CssConstants.Absolute) { CssLength left = new CssLength(b.Left); CssLength top = new CssLength(b.Top); word.Left = left.ConvertToPixels(box.ActualWidth, new CssLength(box.MaxWidth)) + box.ActualMarginLeft; word.Top = top.ConvertToPixels(box.ActualHeight, new CssLength(box.MaxWidth)) + box.ActualMarginTop; } ``` A added ConvertToPixels() which is basically this: ``` public float ConvertToPixels(float boxWidth, CssLength maxWidth) { float finalValue = 0; if (Number > 0 && Unit == CssUnit.Pixels) { finalValue = Number; } else if (Number > 0 && IsPercentage) { finalValue = Number * boxWidth; } if (maxWidth.Number > 0) { float maxWidthVal = -1; if (maxWidth.Unit == CssUnit.Pixels) { maxWidthVal = maxWidth.Number; } else if (maxWidth.IsPercentage) { maxWidthVal = maxWidth.Number * boxWidth; } if (maxWidthVal > -1 && finalValue > maxWidthVal) { finalValue = maxWidthVal; } } return finalValue; } ``` Now, ABSOLUTE images don't wrap like they did. ``` <!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%; } .overlay_image{ position: absolute; top: 80px; left: 80px; width: 100%; height: 100%; } </style></head> <body> <div class="container"> <img src="main.png" class="stretch"/> <img src="overlay.png" class="overlay_image"/> </div> </body> </html> ```