Flash Rendering on top of HTML Elements

I’ve had few problems recently with Flash content rendering over the top of HTML elements, especially when using CSS based fly-out menus. Here’s an example of the problem, showing how Flash content is rendered over the top of the HTML drop-down menu.

Flash Wmode (Windowed)

This is quite annoying, especially after we’ve spent a lot of time developing a Flash intro movie for a client, only for them to ask if they can have drop-down menus on their home page too!

After a bit of digging around I came across the WMODE parameter which controls how the browser renders Flash content. There are three possible options, ‘window’ (default), ‘opaque’, or ‘transparent’. The example above shows the effect of the default option (‘window’).

Setting WMODE to ‘opaque’ has this effect

Flash Wmode (Opaque)

You can see the effect this has, but the background of this Flash movie is set to gray, so content underneath the Flash movie won’t be visible, so we’re 80% there…
Setting WMODE to ‘transparent’ fixes both issues, as you can see.

Flash Wmode (Transparent)

For more details embedding flash content you should check out the article over at A List Apart. There’s also an article on the Adobe website about wmode and how Flash is rendered.

Optimizing Page Load Time

I came across an interesting article today (via Slashdot) entitled Optimizing Page Load Time written by Aaron Hopkins a Software Engineer for Google.

He’s put together quite an interesting study on how to improve the load time of a web page, using a variety of methods, covering everything from the obvious “Load fewer external objects”, to using HTTP Pipelining at the browser end. There’s also some interesting points about how host names affect the speed of your website like:

By default, IE allows only two outstanding connections per hostname when talking to HTTP/1.1 servers or eight-ish outstanding connections total. Firefox has similar limits. Using up to four hostnames instead of one will give you more connections. (IP addresses don’t matter; the hostnames can all point to the same IP.)

And a few, simple, yet often overlooked tips

Set an Expires header on everything you can, with a date days or even months into the future. This tells the browser it is okay to not revalidate on every request, which can add latency of at least one round-trip per object per page load for no reason.

It’s well worth a read.

1 2 Scroll to top