Drop Down Menu not working right in IE- Shooting off to right

Question

I'm stuck. I've never done drop down menus before but wanted to try on a site I'm working on, so I imported someone else's java and css code and got it running just fine in Firefox. Problem is, the drop down menus are appearing way off to the right in IE.

I've created a separate style sheet just for IE, but I haven't been able to figure out what to put on it to correct this!

Here's the site: http://www.erricksonequipment.com

There is a lot of superfluous nonsense in that style sheet as it was imported from an online example. That said, there may be issues in there too that are preventing ie from reading correctly? I'm not sure.. I'm new to this java/css drop down menu stuff! :)

Any help would be GREATLY appreciated.

Answer 1

The script you're using for the drop down menu is not very good . Also, it's quite possible to create that whole drop down menu using just CSS, without any JS.

The drop down menu, in its current state, does not work in IE7 or IE8.

In the spirit of "fixing your problem":

It will work in IE8 (and Firefox, etc) if you change Line 203 in dropdownMenuKeyboard.js from this:

      ? (isie ? li.offsetLeft + 'px' : 'auto')

to this:

      ? 'auto'

However, I recommend you replace the drop down menu code with something more modern.

Answer 2

Be careful when using 'em' as your unit of measurement. The size of 1 'em' is relative to the default font-size set in your browser (or in your CSS if you define it). By default, these font-sizes differ between Firefox and Internet Explorer. I'd recommend using pixels instead, but if you're set on using 'em', just be sure to add a new default font-size in your CSS by doing something like:

html { font-size: 16px; }

By standardizing the default font-size throughout the browser, you won't see any differences in Firefox or Internet Explorer.