I've been working on a web project and am having trouble with Firefox when I hide and unhide table rows with CSS and Javascript.
Please reference this page (<!-- m --><a class="postlink" href="http://www.cs.xu.edu/~mulder/css/test.htm">http://www.cs.xu.edu/~mulder/css/test.htm</a><!-- m -->) for an example.
When viewed in Firefox, the initial page loads correctly. When you click on the "+" sign, table rows should appear underneath the row in which the "+" was clicked. The problem is that Firefox drops it's table display when you unhide the table rows. Hiding the rows fixes the display.
Does anyone have any suggestions?
Thank you in advance.Validate your code. You have several errors. Most related to IE specific generated code. Unfortunately, you are using MSVS which tends to do this and, apparently, generating non-standard tags and attributes which you will have to edit manually if you want it to work with modern browsers, that is, everything but IE. At least that was my experience with it.Validate your code. You have several errors. Most related to IE specific generated code. Unfortunately, you are using MSVS which tends to do this and, apparently, generating non-standard tags and attributes which you will have to edit manually if you want it to work with modern browsers, that is, everything but IE. At least that was my experience with it.
Any particular snippets that looked blatantly wrong to you. HTML Validator didn't complain aobut anything accept for the invalid attribute of p_id.Validate your code. You have several errors. Most related to IE specific generated code. Unfortunately, you are using MSVS which tends to do this and, apparently, generating non-standard tags and attributes which you will have to edit manually if you want it to work with modern browsers, that is, everything but IE. At least that was my experience with it.
OK - I've validated this and am still having issues. Check out <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cs.xu.edu%2F%7Emulder%2Fcss%2Ftest.htm&charset=%28detect+automatically%29&doctype=Inline&ss=1">http://validator.w3.org/check?uri=http% ... nline&ss=1</a><!-- m --> for the HTML Transitional validation.
Any other ideas?i tried this once. firefox dont like it when you mess with display of table elements.
Sollution: what you need to do is put divs inside the tr/td you want to hide, then hide and unhide the divs. you get the same effect you are looking for, trust me, works the same way, the table structure stays, and content expands and collapses as if you were altering the tr. Firefox is happy, and you cant see any difference in IEThanks! I'll try this and hopefulyl won't loose any more hair over the issue.cool, post back here if you have any questions on how i got it to workI tried doing this:
<tr><div id="id1"><td>2</td><td>3</td></div></tr>
Is that correct?
or perhaps I need to hide each column, then that essentially hide the row because no columns display?
<tr><div><td>2</td></div><div><td>3</td></div></tr><tr>
<td><div id="hideable">content to hide</div></td>
</tr>
or
<tr>
<td><span id="hideable">content to hide</span></td>
</tr>I'd try putting the details into their own tables, i.e. your page would consist of four separate tables, then hide and show those whole detail tables.Another good idea. I've also considered placing <tbody> tags around certain <tr> elements...although this is not easy in .NET 1.1
MBI'd try putting the details into their own tables, i.e. your page would consist of four separate tables, then hide and show those whole detail tables.
as i make a rule, try not to dynamically change the display of table elements, firefox doesn't like this, and usuall will leave gaps in pages once a table element is shown, then collapse, the page flow seems to be permanately effected the tables elements boxas i make a rule, try not to dynamically change the display of table elementsThat's why I was recommending hiding complete tables, not table elements.I've finally resolved this by hiding complete tables. I'll dress it up later with some CSS.
Thanks for everyone's help. I've learned a huge lesson this time around.
MBYou can do what you are trying to do by using
tr.style.display='none' to hide and
tr.style.display='' to show. This will cause IE and Firefox to fall back on their default behaviors, which is inline for IE and table-row for Firefox. Your table will render correctly in both browsers.Unfortunately it looks like it doesn't work.
At least i can't make it work using
document.getElementById("row_1").style.display=""
it simply does nothing both on IE and firefox.
Any other idea?
I really need to work with single rows and i would like to avoid working with a DIV for each cell.
Marcelloi tried this once. firefox dont like it when you mess with display of table elements. Not true. FF uses the table display properties: table, table-row, table-cell, etc. IE only understands block and implements it correctly for tables.
To hide/show all table rows:function toggle() {
var aTR=document.getElementsByTagName('tr');
var show=(document.all)? 'block' : 'table-row'; // IE : FF
for(var i=0; i<aTR.length; i++) {
aTR.style.display=(aTR.style.display=='none')? show : 'none';
}
}
Please reference this page (<!-- m --><a class="postlink" href="http://www.cs.xu.edu/~mulder/css/test.htm">http://www.cs.xu.edu/~mulder/css/test.htm</a><!-- m -->) for an example.
When viewed in Firefox, the initial page loads correctly. When you click on the "+" sign, table rows should appear underneath the row in which the "+" was clicked. The problem is that Firefox drops it's table display when you unhide the table rows. Hiding the rows fixes the display.
Does anyone have any suggestions?
Thank you in advance.Validate your code. You have several errors. Most related to IE specific generated code. Unfortunately, you are using MSVS which tends to do this and, apparently, generating non-standard tags and attributes which you will have to edit manually if you want it to work with modern browsers, that is, everything but IE. At least that was my experience with it.Validate your code. You have several errors. Most related to IE specific generated code. Unfortunately, you are using MSVS which tends to do this and, apparently, generating non-standard tags and attributes which you will have to edit manually if you want it to work with modern browsers, that is, everything but IE. At least that was my experience with it.
Any particular snippets that looked blatantly wrong to you. HTML Validator didn't complain aobut anything accept for the invalid attribute of p_id.Validate your code. You have several errors. Most related to IE specific generated code. Unfortunately, you are using MSVS which tends to do this and, apparently, generating non-standard tags and attributes which you will have to edit manually if you want it to work with modern browsers, that is, everything but IE. At least that was my experience with it.
OK - I've validated this and am still having issues. Check out <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cs.xu.edu%2F%7Emulder%2Fcss%2Ftest.htm&charset=%28detect+automatically%29&doctype=Inline&ss=1">http://validator.w3.org/check?uri=http% ... nline&ss=1</a><!-- m --> for the HTML Transitional validation.
Any other ideas?i tried this once. firefox dont like it when you mess with display of table elements.
Sollution: what you need to do is put divs inside the tr/td you want to hide, then hide and unhide the divs. you get the same effect you are looking for, trust me, works the same way, the table structure stays, and content expands and collapses as if you were altering the tr. Firefox is happy, and you cant see any difference in IEThanks! I'll try this and hopefulyl won't loose any more hair over the issue.cool, post back here if you have any questions on how i got it to workI tried doing this:
<tr><div id="id1"><td>2</td><td>3</td></div></tr>
Is that correct?
or perhaps I need to hide each column, then that essentially hide the row because no columns display?
<tr><div><td>2</td></div><div><td>3</td></div></tr><tr>
<td><div id="hideable">content to hide</div></td>
</tr>
or
<tr>
<td><span id="hideable">content to hide</span></td>
</tr>I'd try putting the details into their own tables, i.e. your page would consist of four separate tables, then hide and show those whole detail tables.Another good idea. I've also considered placing <tbody> tags around certain <tr> elements...although this is not easy in .NET 1.1
MBI'd try putting the details into their own tables, i.e. your page would consist of four separate tables, then hide and show those whole detail tables.
as i make a rule, try not to dynamically change the display of table elements, firefox doesn't like this, and usuall will leave gaps in pages once a table element is shown, then collapse, the page flow seems to be permanately effected the tables elements boxas i make a rule, try not to dynamically change the display of table elementsThat's why I was recommending hiding complete tables, not table elements.I've finally resolved this by hiding complete tables. I'll dress it up later with some CSS.
Thanks for everyone's help. I've learned a huge lesson this time around.
MBYou can do what you are trying to do by using
tr.style.display='none' to hide and
tr.style.display='' to show. This will cause IE and Firefox to fall back on their default behaviors, which is inline for IE and table-row for Firefox. Your table will render correctly in both browsers.Unfortunately it looks like it doesn't work.
At least i can't make it work using
document.getElementById("row_1").style.display=""
it simply does nothing both on IE and firefox.
Any other idea?
I really need to work with single rows and i would like to avoid working with a DIV for each cell.
Marcelloi tried this once. firefox dont like it when you mess with display of table elements. Not true. FF uses the table display properties: table, table-row, table-cell, etc. IE only understands block and implements it correctly for tables.
To hide/show all table rows:function toggle() {
var aTR=document.getElementsByTagName('tr');
var show=(document.all)? 'block' : 'table-row'; // IE : FF
for(var i=0; i<aTR.length; i++) {
aTR.style.display=(aTR.style.display=='none')? show : 'none';
}
}