Forum Moderators: open
<table class = "para">
<tr>
<td>System Compatibility</td>
<td>
some unrelated working script
</td>
<td>
<script language="javascript" type = "text/javascript">
var pass = browser_compatibility_check();
if(pass)
{show a picture;}
else
{
var systext = return_formatting();
systext += "System Compatibility</p>";
var sysmsg = system_msg();
systext += sysmsg;
document.write("<a href = \"javascript: display_msg(systext)\"><img src = \"../../../images/tech_x.gif\"></a>");
}
</script>
</td>
</tr>
</table>
<div id = "techmsg"></div>
<p><img src="../../images/content_div.gif"></p>
<p>Minimum System Requirements</p>
The problem is that once the user clicks on the tech_x image, all of the 1st paragraph and most of the second and third paragraphs beneath the div disappears, but the message that is supposed to appear doesn't. Also, since techmsg is simply identified as position: relative, all the paragraphs below it should simply move out of the way, not be written over. Those paragraphs aren't absolute.
Here is other relevant code:
BTW - I do have height and widths on the imgs in the html and in the javascript but removed it for the sake of saving space on this post.
function return_formatting()
{
var format = "<p><img src=\"../../images/content_div.gif\"></p><p>";
return format;
}
function system_msg()
{
var msg = "<p>Your system does not meet our minimum system requirements because</p><ul>";
if(!approvedos)
{msg += "<li>" + nsos + " is not a supported operating system.</li>";}
if(!approvedbrowser)
{msg += "<li>" + browservendor + " is not a supported browser.</li>";}
if(!approvedversion)
{msg += "<li>Version " + version + " of " + browservendor + " is not supported</li>";}
if(!acceptscookies)
{msg += "<li>Cookies are not accepted</li>";}
msg += "</ul><p>Click on all <img src=\"../../../images/tech_x.gif\"> in the third column to read a more detailed explanation of the requirement.</p>";
return msg;
}
<added>Duh! I suppose it would help if I gave the most important code...
function display_msg(val)
{
var obj;
if(document.layers)
{
nn_layers=new Array();
with (document)
{
for (i=0; i<layers.length; i++) nn_layers[i]=layers[i];
{
for (i=0; i<nn_layers.length; i++)
{
if (nn_layers[i].document && nn_layers[i].document.layers)
{
for (j=0; j<nn_layers[i].document.layers.length; j++)
{nn_layers[nn_layers.length] = nn_layers[i].document.layers[j];}
if(nn_layers[i].name == 'techmsg')
{obj = nn_layers[i];}
}
}
}
}
obj.document.open();
obj.document.write(val);
obj.document.close();
}
else if(document.getElementById)
{
obj = document.getElementById('techmsg');
obj.innerHTML = val;
}
}
</added>