CSS drop-down/fly-out menus and Flash

It boils down to this: divs that drop down or fly out (as in most menus) over a Flash object look wonky.

This is better summed up in another post I found. The reply there is simply that the problem lies with Safari’s Flash Player implementation so the ball is in Adobe’s court. Adobe is aware of the problem and either can’t or won’t fix it.

Happy Hallowe’en!


UPDATE: Fixing Flash for other browsers

To help get the Flash window to behave under a flyout menu, this parametre should be added to the <param> lines in the Flash HTML:

<param name="wmode" value="transparent">

And this should be added within the <embed> tag:

wmode="transparent"

Great. This helps Firefox, etc. But still does nothing for Safari.

After seraching a number of forums, I’m convinced this can’t be solved for Safari.


Our Solution

The solution we’re going with is to test for the Safari browser and replace the Flash content with a link that says, “View in a pop-up window.” There. No uglies for Safari users to gripe about.

Form submit button pops into place after focusing in a field (IE 5-6)

I was having trouble with the double-margin bug in IE5-6 with this same form. I don’t know if my fix is what’s now causing this blip, but here goes.


These are the conditions:
+ This is a simple login form: username , password, and submit inputs
+ All the fields of my form are contained in a <fieldset>
+ Each text input is wrapped in a <label>; each label is floated inside the fieldset
+ The submit button is wrapped in a div with style
    { text-align: right; clear: both; padding-top: .5em; position: relative; }


This is what happens:
+ When the page loads in IE5-6, the submit button starts off overlapping the text input above it (in this case the password field)
+ When the user focuses on a text input, the submit button magically slides into place


My easy solution:
I fixed the javascript that selects the first text input field when the page loads. The submit button is seen to pop into place, but it does this rather quickly, and since many pages look glitchy before things slide into place, I think this is an okay quick fix.


However, I do plan to explore what is going on here. Could be that I’m missing a hasLayout trigger. Will report back when I fix it.

IE’s whitespace between list elements, part 2

So you’re creating a drop-down menu using unordered lists within unordered lists, and you’re using display: block for the li elements, along with a background colour that changes on hover. Looks great in Mozilla, but in IE there’s a mysterious extra space below the list item. It’s not padding and it’s not margin, because both of these have been set to 0!important. But there it is still.

Problem: IE, inexplicably, doesn’t recognise the closing tags for lists (</ul>) and list items (</li>). So any space between your closing tag and the next opening tag is treated as a whitespace. You can close these up, but it makes looking at or editing the markup later a real pain. And even if you do that, if you nest another list inside a list item, the whitespace reappears in IE7 — again, despite closing the gaps and declaring margin: 0.

Solution: Just found this most excellent solution from another blogger: declare float: left; clear: left on the li and the gap closes up! Marvelous!