Skip to main content

Bug Tracker

Side navigation

#8301 closed bug (worksforme)

Opened February 17, 2011 04:13PM UTC

Closed February 21, 2011 12:40AM UTC

Last modified February 21, 2011 11:52AM UTC

jQuery effects doesn't like css display table elements

Reported by: samishiikihaku23@gmail.com Owned by: samishiikihaku23@gmail.com
Priority: low Milestone: 1.next
Component: effects Version: 1.5
Keywords: Cc:
Blocked by: Blocking:
Description

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"

Attachments (0)
Change History (8)

Changed February 17, 2011 04:18PM UTC by samishiikihaku23@gmail.com comment:1

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.

Changed February 17, 2011 04:58PM UTC by anonymous comment:2

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.

Changed February 17, 2011 05:57PM UTC by snover comment:3

owner: → samishiikihaku23@gmail.com
status: newpending

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

Changed February 17, 2011 07:28PM UTC by samishiikihaku23@gmail.com comment:4

status: pendingnew

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.

Changed February 19, 2011 06:20PM UTC by snover comment:5

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.

Changed February 19, 2011 07:53PM UTC by samishii23 comment:6

_comment0: 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.1298145221335881

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.

(PS: mind switching "Ownership" to this account?)

Changed February 21, 2011 12:40AM UTC by jitter comment:7

component: unfiledeffects
priority: undecidedlow
resolution: → worksforme
status: newclosed

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.

Changed February 21, 2011 11:52AM UTC by samishii23 comment:8

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