Fork me on GitHub

Friday, April 27, 2007

Blog / Rant-of-the-day: Internet Explorer 7

Rant-of-the-day: Internet Explorer 7

w00t! the most used browser on the Earth got its damn upgrade, so that it now has a decent supports for CSS and (you won’t believe it) alpha transparency in PNG’s! Great! Yay! Weeeeeh.

921_ie7logo.gifOK. Now the bad news.

Put a video from Youtube on your page, then let’s have any javascript more complex than alert(’hello world’);, like for instance slimbox the image lightbox implementation we use in lightbox plugin we have in our alpha (lightbox is that box appearing in the middle of the page with the nice fade transition).

You’ll get a “Cannot display web page” error, and no content for your web page :/

here’s the code from youtube

<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/BrjSKMgGXJw"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/BrjSKMgGXJw" 
type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>

first of all, this code does not validate, and so breaks the validation of your blog (if you’re using flatpress) here’s a working and validating markup:

<object width="425" height="350" data="http://www.youtube.com/v/BrjSKMgGXJw">
<param name="movie" value="http://www.youtube.com/v/BrjSKMgGXJw"></param>
<param name="wmode" value="transparent"></param>
</object>

307.jpgstill, the wmode and transparent couple is what breaks IE7 (d’oh). This parameter makes your flash nicely not overlap other contents. In fact, as Flash is an external plugin object it is usually drawn OVER the rest over the content. But if, say, we have a dropdown menu, we would wont it to appear OVER the flash object and not BEHIND. So this is the reason for having the transparent parameter (as far as I’ve understood :P): it will make the plugin behave how you would expect, to stay as it should stay :)

Anyway, if you need IE to work (and you should), then your markup should read

<object width="425" height="350" data="http://www.youtube.com/v/BrjSKMgGXJw">
<param name="movie" value="http://www.youtube.com/v/BrjSKMgGXJw"></param>
</object>

So, no, “transparent” thingie. In most of the cases you shouldn’t have issues, though.

Please notice this may not be related (only) to IE but to Flash… Firefox and Opera are not affected.

Now.

Oh, dear NoWhereMan, are you really telling use we should edit our markup every time we want to add a video?

Well, not really. If you have FP alpha you can (and you should!) use the cool

tag, which automagically generates the correct and valid markup. And now you can even say w00t.

It currently works with youtube and google video.

Here’s a description.

Bye :)