Link to home
Start Free TrialLog in
Avatar of phil_powell
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
<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>

Open in new window

Avatar of Gibu George
Gibu George
Flag of India image

It seems to be working for me
Avatar of phil_powell
phil_powell

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:

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;
   }
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of phil_powell
phil_powell

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial