The following code shows what I expect in Firefox and Chrome: a small white square in a big green rectangle. I don't see the small square in IE7. How can I make it appear?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
<!--
function start()
{
var g_Div = document.getElementById("bigdiv");
var littleDiv = document.createElement('div');
littleDiv.setAttribute('style',
'position:absolute;'+
'left:300px;'+
'top:300px;'+
'width:5px;'+
'height:5px;'+
'clip:rect(0pt,5px,5px,0pt);'+
'background-color: rgb(255, 255, 255);');
g_Div.appendChild(littleDiv);
}
//-->
</script>
</head>
<body>
<div
id="bigdiv"
style="border: 1px solid ; margin: auto; height: 600px; width: 800px; background-color: green;"
>
</div>
<script type="text/javascript">
<!--
start();
//-->
</script>
</body>
</html>
This should do what you want, and should work across the major browsers:
function start()
{
var g_Div = document.getElementById("bigdiv");
var littleDiv = document.createElement('div');
littleDiv.style.background = 'rgb(255, 255, 255)';
littleDiv.style.width = '5px';
littleDiv.style.height = '5px';
littleDiv.style.left = '300px';
littleDiv.style.top = '300px';
littleDiv.style.position = 'absolute';
g_Div.appendChild(littleDiv);
}