This morning I ran into some trouble where I had a flash player the client wanted to play music on some pages but be invisible except on one particular page where he wanted it to show.

Now flash players can be a bit picky. If any of its containers is or becomes hidden hidden such as having it's display attribute set to none, the player will stop playing or never start. They insist on being visible, even if too small to see.

I used some CSS to set a containing div's width and height to zero on the pages I wanted it to be hidden and on pages I wanted it to show I would set the width and height to some non-zero value to have it show on the screen. Lots of folks simply set the left property to -9999 pixels but after being bitten by a strange bug where links in another div became un clickable because some items had a negative attribute, I try to avoid negative values as much as I can.

This width and height setting of zero worked perfectly on all the browsers tested including Safari 5.x for Mac Os X except for Safari 5.x for PC*

I changed the coding to set the containing div height and width to one pixel instead of zero and it worked on all browsers including Safari for PC.

It appears that Safari sets any elements that have a width or height of zero to hidden or display of none in the flawed assumption that the developer wants the element to be hidden, instead of simply too small to see. This of course caused the player to refuse to start in the first place, because as mentioned earlier, the player will not function within a hidden element.

I did some searching and found no reference to this behavior, and so in the interest of making it available, or at least easier to find, I'm publishing this blog here.

I think I may choose to go back to using the standard method of setting left to -9999 pixels, but that is for later consideration.

* For at least the last two years, all versions of Safari have been released in PC and Mac format.