I just spent the last several days troubleshooting this bug and since I couldn't find any information anywhere on the web for this obscure problem, I'm posting it here.

For a new site I'm building I have randomly loading promo buttons which are created in Flash. Since they're random and will appear on multiple pages, they need to be transparent. Nothing out of the ordinary, but when I put the page together I noticed a very peculiar error...

ONLY in Firefox 1.5 on a PC (2.0 was fine, Mac was fine) and ONLY when the swf had it's wmode property set to transparent, the swf would load but then be inoperable. No rollover animation or button click events would fire. It just sat there doing nothing on the page.

I tried everything to make it work... multiple embed methods, different flash publishing settings, etc. Nothing seemed to help until a colleague steered me, oddly enough, toward the CSS for my page.

My Flash promos where in a floated div tag for the left column of my page. The container element for the page columns contained a few styles, one of which was "overflow: auto;". This was being used to help clear the floats. A simple switch to "overflow: hidden;" magically solved the problem.

I’m still not 100% as to why this problem occurred. I was careful with my widths and paddings to make sure there weren’t any actual overflow problems but for some reason older versions of Firefox were just not happy with it. So there it is… if anyone else ever encounters this very odd random bug, check the CSS overflow property for the solution.

Permalink | Posted On March 16, 2007 Comments (0) | TrackBacks (0)

Recently I was asked to help on a project which involved a lot of Flash work. During one of the meetings someone suggested that we absolutely position a small Flash file over top of a larger background Flash file. Since none of us had actually done that before, I was given the task of figuring out if this would work in all of major browsers.

After a couple hours of testing I concluded that it will indeed work. In order to do so, the background Flash file MUST be transparent (accomplished by setting wmode="transparent"). Once that's done you can layer whatever you like over top of it including a 2nd transparent Flash file, a solid-color Flash file, or any kind of HTML content.

Browsers tested were:
IE 5.2 (Mac)
IE 5.5
IE 6
IE 7
Firefox 1.5
Firefox 2
Safari 1.3
Safari 2
Camino
Opera 9
Netscape 7
Netscape 8

Permalink | Posted On February 25, 2007 Comments (1) | TrackBacks (0)

FLV is a relatively new file format used for Adobe Flash video files. This format is great for adding video to your website but if you're using a new Windows 2003 server you may find yourself spending a lot of time trying to figure out why your video doesn't work.

With IIS 6.0 on Windows 2003, Microsoft doesn't include the proper MIME type for FLVs to play by default. Here's how to add it so that your videos will stream properly.

Click New and enter the following information:

1. Open the site to configure in IIS. Right click and select "Properties"
2. Click the HTTP Headers Tab, select "File Types" under the MIME Map section, and then click "New Type". Enter the following:
• Associated Extension box: .flv
• MIME Type box: flv-application/octet-stream
3. Click "OK" and close the IIS Properties box
4. You may need to restart the WWW Publishing Service

That's all there is to it!

Permalink | Posted On December 3, 2006 Comments (2) | TrackBacks (0)

I was having a conversation with a colleague the other day and mentioned Macromedia Flash Paper. My colleague stared at me blankly. I asked another colleague if he's ever heard of Flash Paper. Another blank stare.

So what exactly is Flash Paper and why has no one ever heard of it? In a nutshell, Flash Paper was designed to compete with Adobe PDF as a universal document format. It uses the regular Flash player, which currently has an adoption rate higher than 97%. They're small, fast-loading, easily printable and open directly in the browser. They're also compatible with assistive technologies like JAWS and Window Eyes for users with vision impairments.

To demonstrate what Flash Paper looks like, I've converted the Website Launch Checklist from my previous blog post. Check it out..

Website Launch Checklist - 63K

So if this is so great, why has no one ever heard of it? Mostly, it's because Flash Paper only comes bundled with Macromedia Contribute which so far not that many people use.

What's to become of Flash Paper now that Adobe has acquired Macromedia? It's hard to be sure but for now, if you need a great alternative to putting PDFs on your site, consider using Flash Paper.

Permalink | Posted On February 16, 2006 Comments (1) | TrackBacks (0)

One of the major limitations of web design is the number of available fonts. Traditionally, designers have been limited to "web safe" fonts like Arial, Verdana, and Times. These work well for all of the main page copy but most designers I know like to use nicer looking fonts such as Futura, Univers, or Trade Gothic for things like headers and pull-quotes.

For years, developers have handled this the only way they knew how... Photoshop. 150 pages meant 150 GIF files of rendered text. This solution is obviously time consuming and makes maintenance a nightmare.

Enter Scalable Inman Flash Replacement (sIFR). In a nutshell, sIFR lets you take CSS-styled text and, using some fancy javascript, dynamically replace the text with a Flash SWF file of the text rendered in the font of your choice.

Since this replacement is done dynamically, the underlying (X)HTML code isn't affected. Users with the Flash plug-in installed will see the intended special font. Users without will instead just see regular CSS-styled text in a fallback font such as Arial. Search engines and screen readers can also easily pick up the underlying text without problems.

See an example page using sIFR

A word of caution… As with any trendy new technique, sIFR should be used in moderation. While it is pretty efficient, you're still creating Flash files on the fly and dynamically replacing text using javascript. This is a great technique for things like headers but it wasn't really designed to replace massive blocks of text so keep that in mind when you implement it.

For more information see:

• sIFR 2.0: Rich Accessible Typography for the Masses
• Download the official sIFR 2.0.1 release

Permalink | Posted On January 22, 2006 Comments (0) | TrackBacks (0)

I spent several hours the other day trying in vain to solve this problem and couldn't find much help online so I'm going to share. I have a website with a "Send this page to a friend" function on it. Users click a button and get taken to a form which inserts the URL of the page the user clicked from. This works by using the HTTP_REFERER server variable to grab the last page the user was on. It's a simple script and once I've used dozens of times before but in this case it would not work in IE. Firefox was no problem but Internet Explorer just didn't work. Several hours of tearing my hair out and I found the answer… The send to a friend button was part of a navigation bar that was created in Flash. When you click a link in Flash, it doesn't register in IE so the HTTP_REFERRR object shows up as blank. I'm not entirely sure if this is a bug or a "feature" but for whatever reason IE, Flash, and HTTP_REFERER do not mix. I tested this in both ASP.NET and PHP and it's the same. The IE user-agent just doesn't pick up the flash links.

Example: The button on top is a .gif image whereas the button on the bottom is a .swf. Both link to a page which displays the HTTP_REFERER variable. Using IE, click on both buttons and you'll see that the flash button doesn't behave as expected.

Image Button

Flash Button

For those interested, my workaround was to pass the user's current page into the flash movie containing the send to a friend button. Clicking the button would then pass the value to the page as a querystring. I.e. send-to-friend.aspx?from=referring-page.html
It's not the most convenient solution but it works and I was able to meet the deadline and those are the only 2 things the client ever really cares about.

Permalink | Posted On December 9, 2005 Comments (4) | TrackBacks (0)