Keyboard Face

We have some nice CSS flyout menus on a site I’m working on now. Unfortunately in IE7 and IE8, JQuery UI’s tabs are being displayed above the flyout menus, making it look like flyouts are appearing underneath the tabs – not what we want.

After much digging through code, firebugging, etc., I figured out that the problem has to do with position:relative and position:absolute.

It would appear that position:relative will trump position:absolute no matter what the z-index. Very confusing and frustrating.

The fix I ended up using was to add a inline style of position:static on the tags that were being made relative. This fixed it and I didn’t have to edit the JQueryUI generated CSS.

I long thought it impossible to have a drop down fall over a flash movie as you would often want in a header of a website.

However, I just saw a website where they accomplished this. After investigating, I found a JQuery library that allows you to do this.

It involves a new way of embedding flash into pages. With just a div tag and a few lines of javascript you can easily embed flash AND have the opportunity to display drop downs over them.

Here’s the link showing it in action:
http://flowplayer.org/tools/demos/flashembed/wmode.html

If you know of any other ways, please pipe up and let us know.

Here’s another link for a great CSS drop down menu:
http://htmldog.com/articles/suckerfish/dropdowns/

Update
It turns out that it’s not the awesomeness of jquery tools that allows you to do this. It’s simply a parameter wmode=transparent that allows it. Jquery tools does look really cool, however.

Another good link for CSS menus is http://purecssmenu.com/ It is an online CSS menu generator.