A quick blogpost from work to document something useful to remember…

Flash Player 7+ has a security restriction that requires XML files loaded into a Flash movie to reside on the same domain as the Flash movie. This I already knew, but what I didn’t know was that Flash Player counts “www.domain.com” and “domain.com” as two separate domains.

This wreaked havoc on my brain for about 15 minutes as I couldn’t figure out why my Flash movie would load images on some computers and not others at the office. Turns out some people were in the habit of typing “www” and some (me included) weren’t.

Then I noticed that Safari was looking for some file called “crossdomain.xml” in its Activity window. I googled it and found this article on Adobe that explains it all. Turns out this file was needed when the Flash player wasn’t sure whether an external file was on the same domain or not. Inside you can put instructions to allow Flash Player access to the domains you need, like so:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="www.company.com" />
   <allow-access-from domain="company.com" />
</cross-domain-policy>

Uploading these few lines of XML into the root folder quickly solved everything. Another crisis averted. =)

I know, I shouldn’t be posting at work, but I just had one of the most convoluted multi-browser debugging sessions ever. So I’m going to blog about this now in case I forget the solutions… because I don’t ever want to relive that ever again. ^^;

So, I’m working on this site for a client at work, and it was all going very beautifully until they wanted drop-down menus. The drop-down menus would have been a piece of cake too, except that they overlay a Flash intro gallery thingy. I embedded it using the much-touted SWFObject method.

For the dropdowns, I used my favorite method for dropdowns, called The Son of Suckerfish (yeah, you know them programmer names =)), which involves using CSS hover attributes applied to a list item to trigger the re-absolute-positioning of the dropdown menu. Here’s where the hilarious fun started.

I implemented the dropdowns, and they worked great, except, as expected, the Flash went over the dropdowns. Applying z-index +100000 would have been the perfectly gar and sensible thing to do, except Flash objects exist in their own stacking order. No good. A Google search took me to some results that suggested adding a WMODE parameter of “transparent”. And voila, it worked in Firefox Mac. Onwards.

I pop open the PC and load the site into IE 6, which is reputed to be worse than IE7 so I always go to it first. Padding and float issues abounded, but I zapped those quickly enough as they’re to be expected. Surprisingly, the dropdowns and Flash played nicely together!

Then I get a phone call from the client. She said the dropdowns were staying open in IE7 even after the mouse leaves the menu. It resulted in a veritable party of open menus. I didn’t have IE7, so I downloaded it, and it overwrote IE6. Then I spent another 15 minutes figuring out how to make the PC let me have multiple versions of IE. I found MultipleIE which turned out to be amazing. I wasted some minutes exploring the internets using IE 3.0… which was a little amazing. It was like time travel. Anyways. That is the first thing I should remember for future reference, that I discovered today: get this amazing tool for debugging “bliss.”

So I opened IE7 and then for the next half hour was trying to replicate the bug. It turns out you have to click somewhere else on the page to get it to show. Another Google search took me to this article, “The IE7 Sticky Hover Bug Enigma” which documents the bug thoroughly and showed me how to fix it with percentage-based absolute positioning instead of pixel-based. Yay!

Next up was Firefox PC. I opened it and blerg, the pop-ups weren’t staying over the Flash. After an hour of searching, I finally found out what the problem was: Firefox PC requires the wmode parameter to be set on the embed tag, instead of on the object tag. I had implemented SWFObject with its static method, which uses 2 nested object tags only. I had to switch to the dynamic method which uses Javascript and includes an embed tag. This nifty little code generator made things so much easier. And that fixed that.

Just to make sure everything was still ok on the IE end after I changed the way Flash was embedded, I went back to IE6 and loaded the page with the Flash. It gave me a scary “Operation aborted” error! AAAAH. And no further explanation. And a blank page. Again, Google saved the day. I found this page which basically pointed out that it was a javascript-related error. So I knew it had to do with the SWFObject, but I didn’t want to undo the work which fixed the Firefox PC issue, so I forged on, looking for a solution to the bug caused by the solution to the last bug.

Back on the SWFObject page, FAQ #4 came to the rescue. It had to do with a base tag. I didn’t even know I had a base tag, but since I was using CMSMS, and it was auto-generating all sorts of site metadata to go in the head, I figured it was probably configurable somewhere in the backend. My template had a {metadata} tag in it, and I found its source under Site Admin -> Global Settings. However this did not have a base tag in it.

I went to the CMSMS Forum (where I seem to be spending an awfully large amount of time these days) and someone wrote that the base tag is generated from one of the CMS’s core PHP files. He/she also helpfully gave instructions to modify it. Again, people on the internet are amazing. I am so thankful.

Finally, that seemed to solve everything. Hooray!

… That is, until on a whim I also decided to open Safari on the Mac and see how things looked. I had expected to look perfect, but instead the body background was missing, as were all the CSS styles I set to the body tag. Argh. Another half-hour of Googling resulted in this find, which miraculously solved my problem.

One last lookover through Firefox Mac, Firefox PC, Safari, IE6, and IE7 seems to reveal no other glaring issues….

Lessons learned: Google is amazing. The internet is amazing. Support from fellow dorks on the internet is wildly better than it was even 4 years ago. Never underestimate the hive mind.