How can I get CSS dropdown menu options triggered by image rollovers, that are cross-browser compatible?

January 18, 2010 1:05 PM

I'm doing a website for free for a good friend of mine who is starting up a business. I've been out of the web monkey loop for a few years and am banging my head against my desk with regards to cross-browser compatibility for CSS dropdown menus -- that include an on hover rollover image as the trigger for the dropdowns.

Basically, I'm trying to use the sample code I found here:

http://www.tyssendesign.com.au/examples/IR-navbar.html

(Example 2)

Here is the accompanying tutorial that I feel I can practically recite at this point.

This is what I come up with:

http://juliemartin.org/menu/testing-menu3.html

(Direct link to CSS file.)

I know that I can get the appearance of the items in the dropdown to look all pretty, but the grey menu items refuse to go black on hover in Firefox 3 and exhibit odd behaviour in IE8.

Here is the image file being called:

http://juliemartin.org/menu/images/newenglishmenu2.jpg

The top versions are the ones my friend would like visible. The bottoms would be on hover.

Obviously I'm missing something and the positioning of each item is completely off as well, which I don't quite understand. Ideally, the About is 109 pixels wide, the Media is 104, the Courses is 144, the Registration is 198, the Events is 123 and the Contact is 166.

This is all so that these dropdown menus will be visible in Internet Explorer. I've already done CSS dropdowns using a combination of suckerfish dropdowns and the MM_swap rollovers, but this causes JS errors in IE and the dropdowns aren't visible. I've tried the csshover3.htc (or hover.htc) fix -- which apparently isn't working for IE to show the dropdowns at the URL I've linked.

So what I'm asking, essentially, is:

a) What on earth is wrong with my code compared to the sample/tutorial code?

b) Is there a better/easier way to beat IE into submission?

c) Should I just give up on the image rollovers and go with plain text menu items?

Thanks for any help you can provide. I can feel my hair going grey over this issue that has confounded me all weekend.

posted by juliebug to Computers & Internet (12 answers total)

I don't know if this is the problem, but your HTML puts the browsers in quirks mode. The example puts them into standards mode. Copying the doctype over would fix that.
posted by AlsoMike at 1:50 PM on January 18, 2010 [1 favorite]

Response by poster: Thanks, AlsoMike. I copied the doctype and now the rollovers work in FF3, except for the positioning. They're popping up above the original menu options and there's still the matter of them all being weird widths.

The rollovers work, in part, in IE8, but when you get to Courses, it reverts to text links.
posted by juliebug at 2:07 PM on January 18, 2010

Your page does not validate. Your CSS link should be a self-closing tag (ending in />) and you have an extra </li> after the text4 link.

Personally, I'd use another dropdown menu method with jQuery (example 1, 2, 3, 4), Prototype or Mootools, and make the image replacement with another method, probably MIR and dividing the image, one for each menu item (here's a IE6 fix for MIR I found elsewhere).

If you want to keep using your actual method, you can correct your markup and keep us posted. I can't post much from work, but I might be able to help you later if anybody doesn't beat me to it.
posted by clearlydemon at 2:33 PM on January 18, 2010

Response by poster: Ugh, thanks, clearlydemon. I haven't done a page from scratch in a really long time, totally didn't occur to me to validate and correct those errors. Editing the code and validating makes both IE (with the csshover3.htc fix) and Firefox view it the same way.

Of course, it's still borked-looking. But I do believe it's progress! ;)

I'll look into the other dropdowns as well, thank you for the links! But if I can manage to get the images lined up properly, I may stick with this, just because it finally looks the same in both browsers, which I feel was the more difficult part. (Then again, I'm the schmuck who didn't validate, set doctypes, etc... so what do I know?)

I'll keep the glorious hive mind posted. Thanks again! :)
posted by juliebug at 2:51 PM on January 18, 2010

Best answer: Fix the widths by changing all the .link1, .link1 em styles to .nav .link1, .nav .link1 em
posted by AlsoMike at 2:55 PM on January 18, 2010

This is outside my area of knowledge, but if I had to make a menu like that, I'd start with GRC's Script-Free Pure-CSS Menuing System
posted by dalesd at 4:04 PM on January 18, 2010

Response by poster: AlsoMike - Oh wow, thank you. I knew I was missing something small in all the nesting crap that's going on. The widths and positions are now perfect, in both browsers no less! Thank you. :)

The issue I'm now having is that the original menu images are showing above the darker (on hover) images when I hover. It seems to me that I haven't seen this particular variety of weirdness before, but it's got to be something as easy as "by the way, cover up everything taller than 43 pixels"...

dalesd - Thank you for the link! That looks a little complex just by virtue of so much code in the CSS, although it's incredibly well-commented. If I can't figure out what I'm trying to now, that might be a very real option for me. :)
posted by juliebug at 4:44 PM on January 18, 2010

Best answer: If you use this image instead of newenglishmenu2.jpg, and change all the :hover background-position y values (currently at -26px) to -46px, it should fix it!
posted by AlsoMike at 5:11 PM on January 18, 2010

Response by poster: AlsoMike - Beautiful! Thank you so much!

Just need to get rid of the left-most padding (?) on the drop downs themselves and then I should be good to go with the French version and then incorporate it all into the site.

Any thoughts on that, oh people who are smarter than I am and definitely more rested? ;)
posted by juliebug at 5:56 PM on January 18, 2010

Response by poster: Aha, figured it out. Slapped this into my CSS:

* { margin: 0; padding: 0; }

And there go the white spaces to the left of the dropdowns.

Thank you so much, AlsoMike, clearlydemon and dalesd. My friend and I are in your debt. :)
posted by juliebug at 7:15 PM on January 18, 2010

Good to know! That left padding was the browser's default padding for lists.

You might want to try a CSS Reset instead of * { margin: 0; padding: 0;}. It is more accurate than just *, and it solves other inconsistencies.
I like Reset Reloaded, and there is also Yahoo's Reset CSS. Just place them at the top of your CSS. Of course, if they mess your menu, you can take them out and try them later in another project :)
posted by clearlydemon at 10:36 PM on January 18, 2010

Response by poster: Excellent, clearlydemon, those are some valuable resources and I'll surely put the idea of a CSS reset to use in another project if not this one. Thank you!

Crazy how much things change in terms of web design/development in the span of a couple years! :)
posted by juliebug at 10:11 AM on January 19, 2010