Bug Tracker

Opened 13 years ago

Closed 13 years ago

Last modified 13 years ago

#8301 closed bug (worksforme)

jQuery effects doesn't like css display table elements

Reported by: samishiikihaku23@… Owned by: samishiikihaku23@…
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"

Change History (8)

comment:1 Changed 13 years ago by samishiikihaku23@…

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.

comment:2 Changed 13 years ago by 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.

comment:3 Changed 13 years ago by snover

Owner: set to samishiikihaku23@…
Status: newpending

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

comment:4 Changed 13 years ago by samishiikihaku23@…

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.

comment:5 Changed 13 years ago by 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.

comment:6 Changed 13 years ago by 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.

Version 0, edited 13 years ago by samishii23 (next)

comment:7 Changed 13 years ago by jitter

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.

comment:8 Changed 13 years ago by samishii23

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

Note: See TracTickets for help on using tickets.