phil_powell
asked on
innerHTML does not display unless you do mouseover in IE6.0
I wrote a very simple HTML page that should display content you selected via dropdown. In IE7 it works perfectly, however, in IE6.0 instead of working it does nothing unless you do a mouseover over that section where the text is supposed to be. I have no mouseover events anywhere in the document, however, in my external stylesheet this occurs:
#header h1, span {
position: relative;
}
Any ideas? I am stumped
Thanks
Phil
#header h1, span {
position: relative;
}
Any ideas? I am stumped
Thanks
Phil
<html>
<head>
<title>test</title>
<script type="text/javascript">
function display(idName) {
var text = "";
if (document.getElementById) {
var dropdown = document.getElementById("dropdown");
} else {
var dropdown = document.forms[0].elements["dropdown"];
}
text = dropdown.options[dropdown.selectedIndex].value;
if (document.getElementById && text != null && text.length > 0) {
document.getElementById(idName).position = "";
document.getElementById(idName).display = "block";
document.getElementById(idName).visibility = "visible";
document.body.style.position = "";
document.documentElement.style.position = "";
document.getElementById(idName).innerHTML = text;
}
}
</script>
</head>
<body>
<form>
<table border="0">
<tr>
<td>
<select name="stuff" id="dropdown" onChange="display('mySpan')">
<option value="">Choose something to display</option>
<option value="">---------------------------</option>
<option value="Hello">Display "Hello"</option>
<option value="Foo">Display "Foo"</option>
<option value="Blah">Display "Blah"</option>
</select>
</td>
<td valign="top">
<span id="mySpan"></span>
</td>
</tr>
</table>
</body>
</html>
It seems to be working for me
ASKER
Figured out the problem!
Turns out a form rule in the stylesheet was clobbering the DOM Object:
form {
// DO STUFF
}
When I remove that rule, everything works perfectly! I have no technical explanation why (anyone care to guess as to why, I'm stumped.. this is IE6.0 if that helps)
However, one of my Javascript functions throws an error I can't fix:
Turns out a form rule in the stylesheet was clobbering the DOM Object:
form {
// DO STUFF
}
When I remove that rule, everything works perfectly! I have no technical explanation why (anyone care to guess as to why, I'm stumped.. this is IE6.0 if that helps)
However, one of my Javascript functions throws an error I can't fix:
function generateImportObject(index, importIndex) {
if (document.styleSheets[index].imports) {
return document.styleSheets[index].imports[importIndex]; // PRODUCES "Invalid procedure call or argument"
} else if (document.styleSheets[index].cssRules &&
document.styleSheets[index].cssRules[importIndex].styleSheet
) {
return document.styleSheets[index].cssRules[importIndex].styleSheet;
} else {
return null;
}
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.