YUI Tab and Flash Graph/Movie

when you use YUI Tab with flash graphs/movie in them, firefox refresh the movie every time you switch away and back to the tab containing flash Graph. if you are using simple graphs it’s not noticeable, but in big movies/graphs it’s irritating. I figured out the basic problem is whenever you change position / overflow values of a div, firefox reloads all flash movies within that div. YUI Tabview have these 2 properties defined for .yui-navset .yui-content .yui-hidden class which get appended to content div when they get hidden.

Fix is to add same properties to visible tab-content div also. This doesn’t make any harm in the way Tab works. Here is the css I did add to fix this issues. But I have not tested this on browsers other than Firefox, try yourself.

.yui-navset .yui-content > div {overflow:hidden;position:static;}
.yui-navset .yui-content .yui-hidden {position:static; }

Position and Z-index

Possible values for "position" attribute are static, relative, absolute, fixed and inherit. The default value of position attribute is "static". Elements are positioned in browser depending of the position attribute; all elements are placed relative to the next parent element which has absolute or relative position declared.

Static is default value and respects normal document flow, absolutely positioned elements removed from document flow, it does not flow around content of other elements, and content from other elements doesn’t flow around absolutely positioned element. Absolutely positioned elements can overlap other elements or get overlapped.

Z-index in CSS works only when you have set position to relative, absolute or fixed. IE-6 treat position as z-index reset, you should specifically declare position of parent element of Z-indexed element to "static" to have them respond to Z-index correctly.