The CSS drop-down hackers challenge

So I pay due time and attention to creating a (frankly, basic) cross-browser CSS navigation menu for a web application (thanks Patrick Griffiths and Dan Webb) only to succumb at the final hurdle to a peculiar “feature” (i.e. bug) which appears on certain browsers. So far I have identified the following culprits:

• IE 6 (Win)
• Firefox 1.5 (Mac)
• Camino 1.0 (Mac)

It’s a simple problem. In the above named (shamed) browsers, a <SELECT> element is treated completely differently to all other basic HTML elements, so when you try and float another element above it, you can’t*. Hurray!

Here’s the dropdown in action - does it work for you?

Now, I’ve spent at least 10 minutes browsing the web for a lovely solution but, alas, there isn’t a neat one. It seems the most popular solution for IE Win is to add an <IFRAME> object to your HTML markup and then cunningly position it in exactly the same place as the floating menu. Urgh! No thanks.

Anyway, that might work for IE, but what about the other browsers? Therein lies the challenge! I personally don’t have the time so it’s all yours. Do your worst!

• * It could well be, of course, that I have simply cocked-up the CSS so please do correct me if I’m wrong!

Posted by Olly on June 1, 2006 at 7:11 pm in css
| Permalink