I have some content within a table and there are several rows which I want to show/hide dynamically using DHTML. I have it working now, but it is not displayed correctly in FireFox.

Currently I am giving certain rows an id value such as: <td id=xyz> ~ usual td's and content ~ </td>. Then using a trigger with some JavaScript code I change the CSS display property of the rows using the getElementById method. However, in FireFox, it appears to interpret the TR's with an ID as new tables instead of TR's within the current table.

So, I am looking for a solution that is cross-browser compatible. Any ideas? BTW: I am using the table to control the horizontal position of the content. I am also considering using the innerHTML method to rewrite the entire table.

To see the table, go to http://repeat-offenders.org/index.php. The table is the TeamSpeak block on the right-hand side of the page. If you 'expand' one of the channels by clicking the plus sign, you will see the problem (if you are using FireFox).

Hey,

This may help you, or it may not, but I noticed when I was building my site that tables in firefox behave better if you either define their size by pixels rather than percent, or just don't specify a size at all for the width, that way the table width should show itself according to the width of the largest single object or unspaced row of text, especially when changing resolutions.

Just a thought

If that isn't helpful, let me know, I'll gladly help you find the solution to your problem. I can be reached through my website, either sign up for the forum or just email me.

Btw, I like the design you chose for your site. Looks good:)

-Smitty

Need a solution to a computer-related problem? Visit my site and get the help you need, quickly. You can join our forum, browse through the tutorials, or ask a question directly via email!

Smitty, thanks for the response, but that is not related to my problem. My problem has to do with the way IE and FireFox interpret the rows with ID's when I am changing the display property. The tables are fine if I remove the code to dynamically hide/show the rows.

But, I think I may have found the solution...

Currently I am changing the CSS display property from 'none' to 'inline' of selected TR elements to hide/show the selected rows. And, this works in IE, but possibly because IE is handling it incorrectly.

According to this page (http://www.w3schools.com/css/pr_class_display.asp), the inline attribute will display the content without line-breaks. It appears FireFox is interpreting the table rows with this property as being an element within the current row/cell.

Also on that page, there is a reference to a 'table-row' value for the display property. This would appear to be the value I should be using (of course, with my luck it is not supported in IE!). I will try that and see if it works.

Michael J

As I predicted, the table-row value works in FireFox but not IE. I can create a swich based upon wether the browser is IE of FireFox, but what of other browsers. For my purposes it is not critical, but I'd like a better solution. I guess I will need to redesign the content to fin a cross-browser solution.

Michael J

i'd use javascript.

if you click on the plus sign, it writes a table row under the plus (or something) and if you click on the minus sign, it takes that code away.

if i knew the syntax for javascript i would write an easy code for you, but i dont know javascript, i just know how it works and what you can do with it.

FBI Agent

AIM: EliteAssassin187

Report Offensive Follow Up For Removal

I am using JavaScript. But to use it to write/remove code would be problematic in keeping track of the code. At this point I'm considering converting all of the table data to an array and dynamically rewriting the table on each click.

Thanks