jQuery effects doesn't like css display table elements

[[email protected]…]

I have a series of divs layed out in my page:

+-+------+-+ The two sides are simply padding
| | NAV  | |  
+-+------+-+
| | BODY | |
+-+------+-+

Using the css properties display:table'',''display:table-row, and display:table-cell through the class property of my divs. When I use jQuerys effects to fade out(general term not the function), append html to the BODY area, then fade back in, the content is now:

+-+------+------+
| | NAV  |      |  
+-+------+------+
| |      | BODY |
+-+------+------+

Also when I click it yet again, it does this:

+-+-----+-+
| | NAV | |  
+-+-----+-+
| |     | | BODY
+-+-----+-+

I couldn't get the jsFiddle to work right. So: ​http://hoa.ath.cx/~dm2/ Developer machine and home comp, so might run a little slow. If you wanna see the result mentioned above, hover "Equipment", then click "Add"

[[email protected]…]

Oh forgot to mention that I removed the append HTML to see if it was my HTML that was breaking the Table. As it stands, the example at the aboved mentioned URL is the one with out the HTML as it still show cases the bug just fine.

[anonymous]

Also i'm using the effects on the actual table-cell element. I know I could simply put another div container into the table-cell div, but I don't know if this sort of behavior is intended or not.

[snover]

The test case link is invalid. Please provide a valid test case demonstrating this issue.

[[email protected]…]

Heres a jsFiddle link to the problem. ​http://jsfiddle.net/kVJcm/3/ Granted its not really filled with my content anymore. But it still show cases what happens.

[snover]

It is extremely difficult for us to isolate or understand the problem you are having when the testcase is not reduced. It would be helpful if you could please reduce your test case as per the ​bug reporting guidelines.

[samishii23]

​http://jsfiddle.net/samishii23/kVJcm/6/ Heres the "Reduced" test case you asked for. Sorry about that. I noticed something, that the div in which is being faded out and what not doesn't have the display: table-cell; style in it. Though that would explain why its messing up... But still. Should it still be doing what its doing? Isn't kinda weird to behave like that, even if its a missing declaring? I mean I know HTML isn't a very strict language... But just my opinion here.

​http://jsfiddle.net/samishii23/kVJcm/7/ This is a test case with the div having the display: table-cell; declaration and it works. Though, maybe my title should be edited to something like, "Weird behavior with improper css display: table-cell declaration" or somethin to that effect.

[jitter]

I cleaned up your test cases a bit (as you didn't use jsfiddle completely properly).

​test case with content-main has class="content-cell"
​test case with content-main has no class

I couldn't reproduce the problems you described, as both of these work just fine for me in FF, Opera and IE8.

[samishii23]

Seems like the problem is with WebKit then. I use Chrome for developement, and Safari also does it.