Using Activemenus with the Garland theme in IE7, nodes get the -/+ buttons, but they can't be clicked to collapse/expand them.

It works well with any other theme I tried (except Minelli) (though there is another issue then: http://drupal.org/node/140620)
Affected browser: IE7
Unaffected browsers: Fx1.5, Fx2, IE6, Opera9
Has its own issue: IE6 (http://drupal.org/node/140621)

I tried to work out why this was happening, and have a few observations:

  • In IE7, if you hover over the -/+ buttons or normal (bulleted) nodes the mouse cursor shows text selection, while other browsers show a hand over the buttons and a pointer over normal (bulleted) nodes.
  • Using Dom Inspector equivalents, if you try to select (by clicking) the -/+ buttons (or bullets), instead it selects the enclosing <div id="block-user-1">

Together these two suggest that the expandable LIs somehow aren't at the top of the stack - perhaps something like position:relative would do the trick? I'm going to try and experiment a little...

CommentFileSizeAuthor
#5 jstools_activemenu_fix_garland_ie7_140622.patch300 bytesJomel

Comments

Jomel’s picture

Jomel commented

Ok, it seems the problem about being unable to click the -/+ buttons is because IE7 doesn't give them hasLayout.
For debugging, adding the following css to garland.css does the trick, though a validating alternative should be sought:

li.activemenu-processed {
  zoom: 1; /* IE proprietary, does not validate! */
}

However, although -/+ buttons now show the hand cursor etc as expected, they can only be collapsed (though nodes that you collapse can be re-expanded), so it still has the IE6 bug I reported: http://drupal.org/node/140621 (except with the -/+ icons)

Jomel’s picture

Jomel commented

Ok, a better css to add for this is:

li.activemenu-processed {
  min-width: 0; /* Harmless hack to give IE7 hasLayout */
}

It validates, and should almost certanly have no impact on other browsers since 0 is the default value (note that although IE6 doesn't support min-width, it doesn't need the hack in the first place).

pvasener’s picture

pvasener commented

I added this to style.css:

li.activemenu-processed {
  min-width: 0; /* Harmless hack to give IE7 hasLayout */
}

I now have a hand pointer but clicking on the +/- icon is still inoperant.

pvasener’s picture

pvasener commented

Correction: I actually works but ONLY for the active menu item which collapses/expands properly. All other items are inactive.

Jomel’s picture

Jomel commented
Assigned: Unassigned » Jomel
Status: Active » Needs review
StatusFileSize
new jstools_activemenu_fix_garland_ie7_140622.patch300 bytes

Attaching patch. Have fixed remaining problem in http://drupal.org/node/140621

nedjo’s picture

nedjo
he/him/his
Primary language English
commented
Status: Needs review » Fixed

Thank you, applied.

Anonymous’s picture

(not verified) commented
Status: Fixed » Closed (fixed)