ie7 innerhtml strange display problem
- by thoraniann
Hello, I am having a strange problem with ie7 (ie8 in compatibility mode).
I have div containers where I am updating values using javascript innhtml to update the values. This works fine in Firefox and ie8. In ie7 the values do not update but if a click on the values and highlight them then they update, also if a change the height of the browser then on the next update the values get updated correctly.
I have figured out that if I change the position property of the outer div container from relative to static then the updates work correctly.
The page can be viewed here http://islendingasogur.net/test/webmap_html_test.html
In internet explorer 8 with compatibility turned on you can see that the timestamp in the gray box only gets updated one time, after that you see no changes. The timestamp in the lower right corner gets updated every 10 seconds. But if you highlight the text in the gray box then the updated timestamp values appears!
Here is the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="expires" content="Mon, 22 Jul 2002 11:12:01 GMT"/>
<title>innerhtml problem</title>
<script type="text/javascript">
<!--
var alarm_off_color = '#00ff00';
var alarm_low_color = '#ffff00';
var alarm_lowlow_color = '#ff0000';
var group_id_array = new Array();
var var_alarm_array = new Array();
var timestamp_color = '#F3F3F3';
var timestamp_alarm_color = '#ff00ff';
group_id_array[257] = 0;
function updateParent(var_array, group_array) {
//Update last update time
var time_str = "Last Reload Time: ";
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if(minutes < 10)
{minutes = "0" + minutes;}
if(seconds < 10)
{seconds = "0" + seconds;}
time_str += hours + ":" + minutes + ":" + seconds;
document.getElementById('div_last_update_time').innerHTML = time_str;
//alert(time_str);
alarm_var = 0;
//update group values
for(i1 = 0; i1 < var_array.length; ++i1)
{
if(document.getElementById(var_array[i1][0]))
{
document.getElementById(var_array[i1][0]).innerHTML = unescape(var_array[i1][1]);
if(var_array[i1][2]==0)
{document.getElementById(var_array[i1][0]).style.backgroundColor=alarm_off_color}
else if(var_array[i1][2]==1)
{document.getElementById(var_array[i1][0]).style.backgroundColor=alarm_low_color}
else if(var_array[i1][2]==2)
{document.getElementById(var_array[i1][0]).style.backgroundColor=alarm_lowlow_color}
//check if alarm is new
var_id = var_array[i1][3];
if(var_array[i1][2]==1 && var_array[i1][4]==0)
{
alarm_var = 1;
}
else if(var_array[i1][2]==2 && var_array[i1][4]==0)
{
alarm_var = 1;
}
}
}
//Update group timestamp and box alarm color
for(i1 = 0; i1 < group_array.length; ++i1)
{
if(document.getElementById(group_array[i1][0]))
{
//set timestamp for group
document.getElementById(group_array[i1][0]).innerHTML = group_array[i1][1];
if(group_array[i1][4] != -1)
{
//set data update error status
current_timestamp_color = timestamp_color;
if(group_array[i1][4] == 1)
{current_timestamp_color = timestamp_alarm_color;}
document.getElementById(group_array[i1][0]).style.backgroundColor = current_timestamp_color;
}
}
}
}
function update_map(map_id) {
document.getElementById('webmap_update').src = 'webmap_html_test_sub.html?first_time=1&map_id='+map_id;
}
-->
</script>
<style type="text/css">
body {
margin:0;
border:0;
padding:0px;background:#eaeaea;font-family:verdana, arial, sans-serif;
text-align: center;
}
A:active { color: #000000;}
A:link { color: #000000;}
A:visited { color: #000000;}
A:hover { color: #000000;}
#div_header {
/*position: absolute;*/
background: #ffffff;
width: 884px;
height: 60px;
display: block;
float: left;
font-size: 14px;
text-align: left;
/*overflow: visible;*/
}
#div_container{
background: #ffffff;border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
float: left; width: 884px;}
#div_image_container{
position: relative;
width: 884px;
height: 549px;
background: #ffffff;
font-family:arial, verdana, arial, sans-serif;
/*display: block;*/
float:none!important;
float/**/:left;
border:1px solid #00ff00;
padding: 0px;
}
.div_group_box{
position: absolute;
width: -2px;
height: -2px;
background: #FFFFFF;
opacity: 1;
filter: alpha(opacity=100);
border:1px solid #000000;
font-size: 2px;
z-index: 0;
padding: 0px;
}
.div_group_container{
position: absolute;
opacity: 1;
filter: alpha(opacity=100);
z-index: 5;
/*display: block;*/
/*border:1px solid #000000;*/
}
.div_group_container A:active {text-decoration: none; display: block;}
.div_group_container A:link { color: #000000;text-decoration: none; display: block;}
.div_group_container A:visited { color: #000000;text-decoration: none; display: block;}
.div_group_container A:hover { color: #000000;text-decoration: none; display: block;}
.div_group_header{
background: #17B400;
border:1px solid #000000;font-size: 12px;
color: #FFFFFF;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
text-align: center;
}
.div_var_name_container{
color: #000000;background: #FFFFFF;
border-left:1px solid #000000;
border-top:0px solid #000000;
border-bottom:0px solid #000000;font-size: 12px;
float: left;
display: block;
text-align: left;
}
.div_var_name{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
display: block;
}
.div_var_value_container{
color: #000000;background: #FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-top:0px solid #000000;
border-bottom:0px solid #000000;font-size: 12px;
float: left;
text-align: center;
}
.div_var_value{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
.div_var_unit_container{
color: #000000;background: #FFFFFF;
border-right:1px solid #000000;
border-top:0px solid #000000;
border-bottom:0px solid #000000;font-size: 12px;
float: left;
text-align: left;
}
.div_var_unit{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
.div_timestamp{
float: none;
color: #000000;background: #F3F3F3;
border:1px solid #000000;font-size: 12px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
text-align: center;
clear: left;
z-index: 100;
position: relative;
}
#div_last_update_time{
height: 14px;
width: 210px;
text-align: right;
padding: 1px;
font-size: 10px;
float: right;
}
.copyright{
height: 14px;
width: 240px;
text-align: left;
color: #777;
padding: 1px;
font-size: 10px;
float: left;
}
a img {
border: 1px solid #000000;
}
.clearer { clear: both; display: block; height: 1px; margin-bottom: -1px; font-size: 1px; line-height: 1px; }
</style>
</head>
<body onload="update_map(1)">
<div id="div_container"><div id="div_header"></div><div class="clearer"></div><div id="div_image_container"><img id="map" src="Images/maps/0054_gardabaer.jpg" title="My map" alt="" align="left" border="0" usemap ="#_area_links" style="padding: 0px; margin: 0px;" />
<div id="group_container_257" class="div_group_container" style="visibility:visible; top:10px; left:260px; cursor: pointer;">
<div class="div_group_header" style="clear:right">Site</div>
<div class="div_var_name_container">
<div id="group_name_257_var_8" class="div_var_name" >variable 1</div>
<div id="group_name_257_var_7" class="div_var_name" style="border-top:1px solid #000000;">variable 2</div>
<div id="group_name_257_var_9" class="div_var_name" style="border-top:1px solid #000000;">variable 3</div>
</div>
<div class="div_var_value_container">
<div id="group_value_257_var_8" class="div_var_value" >0</div>
<div id="group_value_257_var_7" class="div_var_value" style="border-top:1px solid #000000;">0</div>
<div id="group_value_257_var_9" class="div_var_value" style="border-top:1px solid #000000;">0</div>
</div>
<div class="div_var_unit_container">
<div id="group_unit_257_var_8" class="div_var_unit" >N/A</div>
<div id="group_unit_257_var_7" class="div_var_unit" style="border-top:1px solid #000000;">N/A</div>
<div id="group_unit_257_var_9" class="div_var_unit" style="border-top:1px solid #000000;">N/A</div>
</div>
<div id="group_257_timestamp" class="div_timestamp" style="">-</div>
</div>
</div><div class="clearer"></div><div class="copyright">© Copyright</div><div id="div_last_update_time">-</div>
</div>
<iframe id="webmap_update" style="display:none;" width="0" height="0"></iframe></body>
</html>
The divs with class div_var_value, div_timestamp & div_last_update_time all get updated by the javascript function. The div "div_image_container" is the one that is causing this it seems, atleast if I change the position property for it from relative to static the values get updated correctly
This is the page that updates the values:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Loader</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
<!--
window.onload = doLoad;
function refresh()
{
//window.location.reload( false );
var _random_num = Math.floor(Math.random()*1100);
window.location.search="?map_id=54&first_time=0&t="+_random_num;
}
var var_array = new Array();
var timestamp_array = new Array();
var_array[0] = Array('group_value_257_var_9','41.73',-1, 9, 0);
var_array[1] = Array('group_value_257_var_7','62.48',-1, 7, 0);
var_array[2] = Array('group_value_257_var_8','4.24',-1, 8, 0);
var current_time = new Date();
var current_time_str = current_time.getHours();
current_time_str += ':'+current_time.getMinutes();
current_time_str += ':'+current_time.getSeconds();
timestamp_array[0] = Array('group_257_timestamp',current_time_str,'box_group_container_206',-1, -1);
//timestamp_array[0] = Array('group_257_timestamp','11:33:16 23.Nov','box_group_container_257',-1, -1);
window.parent.updateParent(var_array, timestamp_array);
function doLoad()
{
setTimeout( "refresh()", 10*1000 );
}
//-->
</script>
</head>
<body>
</body>
</html>
I edited the post and added a link to the webpage in question, I have also tested the webpage in internet explorer 7 and this error does not appear there. I have only seen this error in ie8 with compatibility turned on.
If anybody has seen this before and has a fix, I would be very grateful.
Thanks.
