problem with row hiding script in mozilla 1

[foxphpbomb]

I have this script that hides and shows a table row that is invoked on a mousover event:

function showRow(x)
{
	document.getElementById(x).style.display="block";
}

function hideRow(x)
{
	document.getElementById(x).style.display="none";
}

The problem is that if I invoke the hiding part of the function, all the contents included in that table row disappear, but the vertical space that the row occupies on the screen remains, so if I keep hiding and showing rows, it keeps bumping down whatever is below that row one, messing up the design. This only happens in firefox. Can this function be modified to fix this problem, or is there an alternate method?

 

[kaht]

The problem isn't with the row disappearing, it's with the row re-appearing.

function showRow(x)
{
    document.getElementById(x).style.display=[!]"block"[/!];
}

The code you have provided is incorrect, but IE is too stupid to know otherwise. The default display type for table rows is table-row, not block. So, when you're changing your display type to block in firefox you're not setting it back to it's default setting. You could change your code like this to make firefox understand:

function showRow(x)
{
    document.getElementById(x).style.display=[!]"table-row"[/!];
}

But the problem here is that IE is still too stupid to understand - it apparently has no clue what table-row means, even though it's all spelled out in the w3c specification:

http://www.w3.org/TR/REC-CSS2/tables.html#q2

Now, there is still a light at the end of the tunnel. I think its a sh*tty solution, but it works nonetheless. If you set the display type to an empty string the row will use it's default display type. So, make the following change and everything should be kosher:

function showRow(x)
{
    document.getElementById(x).style.display=[!]""[/!];
}

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B> bites again.[/small]

 

[foxphpbomb]

Thanks for the detailed explanation.

Actually what works for me in both browsers is:

function showRow(x)
{
document.getElementById(x).style.display="block";
document.getElementById(x).style.display="table-row";
}

Is there a way to say make all elements on the page that are hidden visible instead of (x)?

 

[kaht]

Is there a way to say make all elements on the page that are hidden visible instead of (x)?

Sure, loop thru all the elements on the page, check to see if the display type is "none", and then set the display to "" if it is.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B> bites again.[/small]