Making hidden OBJECTs work in Safari
I spent much of yesterday cutting HTML … and losing hair over weirdo bugs in Safari.
For instance: create an object
or an iframe
on a page, give it a CSS border, set display:none
in the stylesheet, use JavaScript to set ...style.display='block'
, then use it again to set ...style.display='none'
. Under certain conditions (I’m still not quite sure which), the included content will disappear … but the border won’t!
So just in case Google points someone here: if you are trying to use display:none
on an iframe
or object
, and more specifically trying to change that style using document.getElementById('foo').style.display
… don’t.
Instead, whack a div
around your object
and apply display:none
to that. (This solution came to me quite serendipitously, when the validator told me I sucked for using a Strict DTD but not putting my object
inside a block-level element.)
The only gotcha is in Firefox, which has a bug whereby the object
inherits display:none
from the div
you create. Solution: run the document.getElementById
pizzaz on the object
itself as well.
In other Mac-ish news, I’ve just discovered the RSS reading program Vienna, and find myself feeling quite partial towards it.