Advanced CSS help needed with dropdown problem in IE 6 & 7

[poundcommapound]

Hi,

I'm working on a site that uses dropdown menus, and I'm having some
trouble in IE. When you mouse over a menu header, the dropdown comes
down as expected. However, as you move down the dropdown to select an
item, the dropdown disappears as soon as the mouse hits the next
element down (in my case, an h3). If I move the h3 down further, more
of the dropdown is accessible, but that's not an option. Of course, FF
and Safari display properly.

Also worth noting is that if I set the dropdowns to be always visible,
the problem doesn't happen - I can go up and down the menu without any
problem - it only happens when the menu is set to disappear when it's
hover condition is no longer met.

There's a lot of code involved with this thing, so I didn't include it
here. It'll probably be easier to firebug it or just look at the code.

Anyone that could help would be my hero (and a genius, probably).
Thanks!

Here's the page link: http://s212807978.onlinehome.us/beta/training/index.html

 

[Beauregard T. Shagnasty]

I'm working on a site that uses dropdown menus, and I'm having some
trouble in IE. When you mouse over a menu header, the dropdown comes
down as expected. However, as you move down the dropdown to select an
item, the dropdown disappears as soon as the mouse hits the next
element down (in my case, an h3). If I move the h3 down further, more
of the dropdown is accessible, but that's not an option. Of course,
FF and Safari display properly.

What happens if you remove the IE-specific style sheets?

Also worth noting is that if I set the dropdowns to be always
visible, the problem doesn't happen - I can go up and down the menu
without any problem - it only happens when the menu is set to
disappear when it's hover condition is no longer met.

There's a lot of code involved with this thing, so I didn't include
it here. It'll probably be easier to firebug it or just look at the
code.

Anyone that could help would be my hero (and a genius, probably).
Thanks!

Here's the page link: http://s212807978.onlinehome.us/beta/training/index.html

The validator says you have a missing </ul> on
"Line 122, Column 4: end tag for "ul" which is not finished ."

There are also several CSS errors listed by that validator. It also
appears to be overly complex, making a quick troubleshoot quite
difficult.

Or maybe it has something to do with all the negative pixel margins all
throughout your CSS. <boggle>

Before you go much further, I feel you should fix the page so it is
legible. I have to press Ctrl-Plus twice in order to read it.

body { ...
font-size: 50%;
... and
font-size: 62.5%;

Please see this page:
http://k75s.home.att.net/fontsize.html

You have no background color assigned to body.

 

[Bergamot]

http://s212807978.onlinehome.us/beta/training/index.html

NO NO NO NO!!!!

body {
font-size: 62.5%;
}
#content p {
font-size: 1.3em;
}

You *MUST NOT* do this! If you're going to set type size to something
smaller than 100%, for the love of &deity; don't do it this stupid way.

Have some consideration for your users, please. Those of us who set a
minimum font size in our browsers will appreciate it.

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Fri, 01 Feb 2008 16:54:30
GMT (e-mail address removed) scribed:

Hi,

I'm working on a site that uses dropdown menus, and I'm having some
trouble in IE. When you mouse over a menu header, the dropdown comes
down as expected. However, as you move down the dropdown to select an
item, the dropdown disappears as soon as the mouse hits the next
element down (in my case, an h3). If I move the h3 down further, more
of the dropdown is accessible, but that's not an option. Of course, FF
and Safari display properly. ....
Here's the page link:
http://s212807978.onlinehome.us/beta/training/index.html

Don't see the problem. Did you mean ie6?