jquery - Can a td be the relatively positioned ancestor of an absolutely positioned element? -


i have image want transition image. child of containing td element.

so first style td .css('position', 'relative')

then create second image , give properties:

var img = $('<image src="a.png" />')    .css({       position: 'absolute',       top: 0,       left: 0,       opacity: 0,       'z-index': 1    })    .appendto($td) ; 

finally animate old image , new one:

img.fadein(1000); oldimg.fadeout(1000); 

at end of animation can remove old image , reset css properties.

now, works great in ie7, firefox 5 sending replacement image top left of div containing table instead of overlaying existing image in td. correct behavior? td not valid relatively positioned ancestor because it's not block element or that?

suggestions of better ways make 1 image fade welcome.

update

i switched having image inline usual, added negative top margin equal own height (since image fills cell, displays underneath image want replace). worked beautifully , didn't require absolute positioning.

so first style td .css('position', 'relative')

check out wc3 css 2.1 specification : visual formatting model : 'position' property:

the effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, , table-caption elements is undefined.

a common workaround wrap div position:relative around inside td.

are sure need using tables this?


Comments

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

actionscript 3 - TweenLite does not work with object -

jQuery Ajax Render Fragments OR Whole Page -