IE7, CSS, and rollover menus
by Juliet Kemp
This week's discovery: a bug with IE7's CSS handling (I'm sure you're all very surprised), and the workaround.
The bug: I have rollover submenus, set up with CSS. In Firefox and Safari they behave as expected: the submenu pops up on rollover, and then you can navigate the mouse to the submenu item you want and click on it. In IE7, when you try to navigate to the submenu items, as soon as your pointer moves off the rollover-trigger item, the submenu vanishes. Most irritating.
The eventual solution was to give the submenu a background image (also in CSS). This background image doesn't need to actually exist (mine doesn't, to save creating a transparent one) - just the call to it seems to be sufficiently to counter the bug. I confess to having no idea whatsoever why this works, but work it does. In fact you probably do want the background image file to exist (to avoid errors in your logs), but just touching it will be fine.
(I would like to extend intense gratitude to whoever it was put me onto this; unfortunately I went through so many different sites over the hour or so I spent struggling with this that I don't know who or where it was that I found the idea. I'm still very grateful to them, though.)
I've done a good deal of server-side development, but not much front-end web development. Lately, though, I've been delving into this as I try to setup a website for myself that I want to look nice. Learning the CSS hasn't been too much of a challenge, but dealing with all of these IE bugs is really a huge pain. I thought IE7 was supposed to make these headaches go away!