The Pencil Guy: Hourann's illogical blog

Making hidden OBJECTs work in Safari

Sunday 18 June 2006 at 9:09 pm

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.

no comments »