CSS and ASP.NET Menu in Sharepoint

Using CSS in SharePoint differs a little bit from the standard approach we use in ASP.NET applications – some styles doesn’t work as they expected to work.

The major problem is that SharePoint doesn’t understand some CSS applied on ASP.NET сontrols. I stumbled over several cases. There is a simple rule how to avoid this – just use the SharePoint controls instead of ASP.NET once. In this cases CSS will be applied correctly

The nastiest thing I remember about CSS and Sharepoint is using asp:Menu control 🙂 This control is very dodgy under normal asp.net sites, but it’s double dodgy under Sharepoint.

The situation is that – you have page area height equal 100% of client browser height. It means that if you change the size of your browser window page layout height is changing too. On this page we have navigation which is implemented via <asp:Menu> control. So far so good, but there is a small issue. If you navigate on menu and dynamic sub-items are shown your page height changes and you noticing that vertical scroll bar is shown. WTF you could think 🙂 Why this scroll bar appears?! This never happens in ASP.NET sites.

The answer is – CSS "min-height" property. This property sets the minimum height of your page when scroll bar appears. So, what you do is just edit your page and add the .min-height: 2000 for the page’s root element and test the page in browser.

Unfortunately, situation the same – scroll bar appears when your menu items are shown. You can use IE Dev Toolbar of other tool to debug DOM model in browser, but changing this property doesn’t help at all.

The issue is exactly in <asp:Menu> control. I dunno why but it breaks the page CSS style of min-height (I’d pleased if someone explain me WHY and HOW this happens?!). To fix this you need to use <Sharepoint:AspMenu> control instead of <asp:Menu> and min-height is set correctly in this case – no scroll bar when you navigate on menu.

Mirror: CSS and ASP.NET Menu in Sharepoint