IE VS FireFox display inline

[fluid]

I've noticed that FireFox messes table layout if you try to hide a table row.

<table>
<tr>
<td>
hello world
</td>
</tr>
<tr class="hiding-class">
<td>
Hide me!
</td>
</tr>
</table>

As illustrated above, if hiding-class toggles between display:block and display:none, IE displayes the table row correctly but when viewed in FireFox the row is completely out of place. I've found a workaround which determines which browser the user is using and writes display:table-row as apposed to display:block which works absolutely fine.

If you have had the same problem, im eager to know how you solved it and if it's easier than using javascript like i did.

[torunforever]

Refer here:
http://archivist.incutio.com/viewlist/css-discuss/38545

Basically you should set display to '' (empty quotes) instead of setting it to block or table-row, and that will work in both IE and FF.

[fluid]

I've heard that setting display: '' is not recommended. It should always have a value. What's your opinion on this?

[torunforever]

I can't find any convincing proof to use display: '' but let me ask you this. How are you doing the browser detection? Have you tried another browser besides IE and Firefox? If you're doing something like if (document.all) then Opera will pass that "if", and execute IE's display = 'block' code, which looks equally bad in Opera as Firefox, because Opera also prefers the standard value 'table-row'. But if you use display: '' it works fine in IE, Firefox, and Opera. I haven't tested it in other browsers, but if you do, let me know what you find.

[fluid]

I havent tested in Opera yet and other browsers besides IE and FF but will do some time soon and will let you know of the outcome :)