[RESOLVED] display property error only in IE7

[mechphisto]

I have a page:
http://www.girlscoutsmoheartland.org...progsearch.php
that works perfectly fine in every browser I try, except for actual IE7 (it even works fine in IE8 emulating IE7).
When you search for something on that page and have a display of results, each result has a link that changes a table row's display to visible, and hides the row when clicked again. It doesn't do that in IE7.
There are no errors or warning in Firefox's Error Console. But IE7 has an "Error on Page" notice (which does NOT appear in IE8 emulating IE7), that says:

Line: 59
Char: 11
Error: Could not get the display property. Invalid argument.

The script in question is this, with what would be line 59 indicated:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       var f = document.getElementById(id + "b");
	   
       if(e.style.display == 'table-row')
          e.style.display = 'none';
       else
          e.style.display = 'table-row'; <<-- This is line 59
		  
       if(f.style.display == 'table-row')
          f.style.display = 'none';
       else
          f.style.display = 'table-row';
    }
//-->
</script>

I really don't know what to do, or where to begin. Everything in my limited knowledge seems to be working just fine. Most of my site's visitors use IE8, but enough use actual IE7 that I really need to fix this.
Thanks for any help or advice!
Liam

[Declan1991]

Have you definitely no name conflicts? No element with the same name as the id you are using for example.

[tirna]

I use elements whose name and id are the same without any problems, so I doubt that is your problem.

I suspect that IE7 does not support a value of 'table-row' for styles.

Maybe try setting the value to an empty string which results in the display style being set to whatever the default value is for that type of element.

 

if(elemObject.style.display != 'none') {
       elemObject.style.display = 'none';
} else {
       elemObject.style.display = '';
}

[mechphisto]

I use elements whose name and id are the same without any problems, so I doubt that is your problem.

I suspect that IE7 does not support a value of 'table-row' for styles.

Maybe try setting the value to an empty string which results in the display style being set to whatever the default value is for that type of element.

 

if(elemObject.style.display != 'none') {
       elemObject.style.display = 'none';
} else {
       elemObject.style.display = '';
}

Well, that actually makes perfect sense to me! Except when I try that, it messes it all up even worse in all browsers.
Although, there may be some way to fudge things around to make some application of that to work.
Thanks for the suggestion!

[tirna]

There must be something else going on in your code that depends on how and where you call toggle_visibility(id).

[arrielmabale]

Just enclose the whole display with a div, then let the div control the display without affecting the inner contents.

[mechphisto]

OK, FINALLY got it to work like this:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       var f = document.getElementById(id + "b");
	   
		if (document.getElementById(id).style.display == 'none') {
			try {
				document.getElementById(id).style.display = "table-row";
			}
			catch (e) {
				document.getElementById(id).style.display = "block";
			}
		}
		else {
			document.getElementById(id).style.display = 'none';
		}
		  
		if (f.style.display == 'none') {
			try {
				f.style.display = "table-row";
			}
			catch (e) {
				f.style.display = "block";
			}
		}
		else {
			f.style.display = 'none';
		}
}
//-->
</script>

Ugh, IE7 is a PAIN!