When I attempt to insert elements as static html text, everything functions correctly. However, when I try to insert elements at runtime (using arrays of data from the server), I encounter positioning issues with absolute. Here is the simplest example to replicate this problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Positioning</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body { font-family: Verdana, Tahoma, sans-serif; font-size: 14px }
div { border: 1px solid black }
.div5 { float: left; width: 300px; height: 300px; }
.div6 { width: 100px; height: 100px; position: absolute; top: 50px; left: 50px; background-color: #F5D8C1 }
.div9 { width: 20px; height: 20px; position: absolute; bottom: 20px; left: 20px; background-color: #D8F5C1 }
</style>
</head>
<body>
<div id="content"></div>
<script type="text/javascript" language="JavaScript">
function setDivValue($divId, $value)
{
var divL = document.getElementById($divId);
if (divL)
divL.innerHTML = $value;
}
var rtext = "<h1>Position absolute test</h1>";
for (var i = 0; i < 10; i++){
rtext += "<div class='div5' id='" + i + "'>" +
"<div class='div6'>div6</div>" +
"<div class='div9'>div9</div>" +
"</div>";
}
setDivValue("content", rtext);
</script>
</body>
</html>
Instead of positioning div6 and div9 relative to the parent element div5, they are being positioned relative to the window in both Firefox 20 and Internet Explorer 8 (indicating that this issue is not browser-specific).
Is there a solution to this problem? I am looking to place pictures within div6 and place text within div9 at the top left corner of the picture (inside).