Flash navigation and creating buttons

This post is about some recent issues I had creating simple Flash navigation. I chose to use Flash because though it is possible to create a nav menu entirely in CSS, it takes up way too much time to try and get it to behave the same way across browsers. Fortunately Flash is ideal in this situation.

OK, two things. They may seem ridiculously easy, but I know that sometime in the future I’ll probably have the same sort of issues and it will help to have them noted here. The first happened last night when I decided to use Flash for the navigation menu on our business site. The second was this afternoon when I was creating a new Submit button for a form.

Last night I created a nav menu with some simple buttons. Everything went fine, and pretty quickly too, until I started testing. In Firefox, the menu appeared exactly where I wanted it — the top left corner, immediately under the page header. In IE (specifically IE6), however, the menu was sliding way down the page, about 200px or so below where it should be. I could not immediately see why it was doing this, especially because the height of the movie was set within the Flash object itself. Yet when I put a border around the object, it showed up as being much taller than the 310px it was supposed to be, and the actual nav menu was centered vertically within it.

Naturally the first thing I tried was to set the vertical alignment in CSS. This had no effect. I also noticed that the Flash object had “align=’middle'” set, so I changed that to “align=’top'”; still nothing. As a last ditch effort I used CSS to set the height and width of the object — even though they were already specified in the Flash parameters — and to my surprise, it worked! The nav menu now appeared at the top left corner even in IE. I don’t know why it worked, but it worked and I’m so anxious to have this site finished, that’s all I care about.

OK, on to the second issue. This afternoon I was creating a simple Submit button for a webform. This is such a simple process I won’t even go into it here. Suffice it to say that it is just a plain old 3-state (Up, Over, Down) button with a background image and a text label.

When I tried to test the button, the rollover state wasn’t working properly. It worked when I rolled over the perimeter of the button, but when the cursor was over the text label, nothing happened. This had me really steamed because whenever a process is supposed to be as simple as this should have been, it’s just all the more aggravating to me when it goes wrong.

I should have remembered Ockham’s Razor at this point, but instead I fell into the classic panic trap and started searching the web for issues with Flash buttons. After just a minute or two of that, I realized that was silly and there HAD to be a simple explanation for what was going on. I mean, I’m no Flash expert, but I have definitely made my share of nav buttons with no problems.

I went back into test mode in Flash and watched the button behavior more carefully. It occurred to me that as I rolled over the text label, the arrow cursor was changing to an I-beam cursor. So that was it!! The text had been entered as Input, or editable, Text. Instead of the Flash program defaulting to Static Text, it must have remembered what I had used last and kept that setting. As soon as I changed the text type back to Static, the button behaved as expected.