SharePoint 2010 Site Actions menu items hidden in IE9

Question

I poked around a bit for the answer but didnt find anything. I have a site in which the Site Actions menu items are hidden in IE (all version). Some background on the site:

I am currently working on a MOSS 2007 to SharePoint 2010 migration. We have a custom master page to which I made the following modifications:

1. Added SpRibbon and Site Actions menu as UIVersionedContent - Depending on the UI version (Pre visual upgrade or post-visual upgrade) It renders the appropriate Site actions menu or in the case of the visual upgrade, site actions within the ribbon.

2. Added alternate CSS as UIVersionedContent to reference a custom CSS file depending on the UI version (3 or 4). The site had a custom CSS file before migration for overrides. I copied and made a V4 version of this css overide file.

3. I maintained the "Transitional" DOCTYPE in the custom master page.

. The site looked fine after migration. However, when creating a new site, or after a visual upgrade I noticed that the Site Actions menu items do not appear. I can see "Site Actions" button however when you click on it the menu items are hidden behind the rest of the site content. Everything looks great in all other browsers EXCEPT IE. Below is what I have tried:

1. I tried changing the DOCTYPE to Strict. This renders the site actions menu correctly, however the rest of the site gets jumbled.

2. I tried adding a META tag to render in IE7 compatability mode but that also jumbles the site (no surprises there).

3. I tried modifying my CSS overrride file but the site actions menu options (edit page, etc) continue to hide behind the rest of the mater page container.

4. I wrapped a DIV around the Site actions menu but all that allowed me to do was increase the height of the ribbon. This does allow me to see the menu options under site actions, but only if I set the height to take up most of the height of my screen (not a viable option)

So I guess my question is has anyone run into this and if so is there a CSS trick you used to remedy this situation for IE or do I just need to change my DocType to STRICT and rework the css for my entire site?

Thanks for your help!

Answer 1

Its difficult to say without being able to look at the actual code but I'm taking a guess from a CSS point of view.

The element containing the menu or one of its parents may have the overflow:hidden style. This prevents the menu from showing outside of the bounds of its containing element.

More likely is that the ordering of the dom element is such that it is actually positioned behind another element. If so, look into z-index. Sometimes you can show one element over another by putting a high value in the z-index style property.