Lars Nielsen's Discoveries

May 6, 2011

My Links loses the orange gradient background on hover – A CSS case-sensitivity issue

Filed under: Branding,SharePoint — Lars Nielsen @ 7:39 pm
Tags: ,

In trying to create CSS to style a custom master page in SharePoint, I discovered a strange quirk (you’ll see the significance of that word later) in the way SharePoint out-of-the-box styles and controls work.

The “My Links” link at the top of the page next to the “Welcome” box is rendered by the following line in a master page:

<SharePoint:DelegateControl runat="server" ControlId="GlobalSiteLink2" Scope="Farm"/>

If you look at the HTML that comes out on the page, it’s marked up with HTML like this:

<TD class="ms-globallinks">
  <SPAN id="ctl00_ctl16_MyLinksMenu">
    <SPAN style="DISPLAY: none">
      <MENU id="ctl00_ctl16_MyLinksMenuMenuTemplate" type="ServerMenu" largeIconMode="true"></MENU>
    </SPAN>
    <SPAN title="Open Menu">
        <span id="ctl00_ctl16_MyLinksMenuMenu_t" class="ms-SPLink ms-hovercellinactive" onmouseover="MMU_PopMenuIfShowing(this);MMU_EcbTableMouseOverOut(this, true)" onclick="javascript:FetchCallbackMenuItems('ctl00_ctl16_MyLinksMenuMenuTemplate'); MMU_Open(byid('ctl00_ctl16_MyLinksMenuMenuTemplate'), MMU_GetMenuFromClientId('ctl00_ctl16_MyLinksMenuMenu'),event,true, null, 0);" nowrap="nowrap" foa="MMU_GetMenuFromClientId('ctl00_ctl16_MyLinksMenuMenu')" hoverInactive="ms-SPLink ms-hovercellinactive" hoverActive="ms-SPLink ms-hovercellactive">
          <a style="white-space: nowrap; cursor: hand;" onkeydown="MMU_EcbLinkOnKeyDown('ctl00_ctl16_MyLinksMenuMenuTemplate'), MMU_GetMenuFromClientId('ctl00_ctl16_MyLinksMenuMenu'), event);" id='ctl00_ctl16_MyLinksMenuMenu' oncontextmenu="this.click(); return false;" onfocus="MMU_EcbLinkOnFocusBlur(byid('ctl00_ctl16_MyLinksMenuMenuTemplate'), this, true);" onclick="javascript:return false;" href="#" serverclientid="ctl00_ctl16_MyLinksMenuMenu" menuTokenValues="MENUCLIENTID=ctl00_ctl16_MyLinksMenuMenu,TEMPLATECLIENTID=ctl00_ctl16_MyLinksMenuMenuTemplate">
            My Links
            <IMG border=0 alt="Use SHIFT+ENTER to open the menu (new window)." src="/_layouts/images/blank.gif">
          </A>
          <IMG alt="" align="absBottom" src="/_layouts/images/menudark.gif">
        </SPAN>
    </SPAN>
  </SPAN>
</TD>

I’m sure your first thought on seeing this is: yuck! It’s the familiar wonky SharePoint HTML, but I want to point out this class assignment in the inner <SPAN> tag:

class=”ms-SPLink ms-hovercellinactive”

and this attribute:

hoverActive=”ms-SPLink ms-hovercellactive”

What happens here is that as the user runs the mouse over “My Links” the onmouseover attribute calls the Javascript function MMU_PopMenuIfShowing. That reads the hoverActive attribute and then dynamically changes the CSS class for the SPAN tag from “ms-SPLink ms-hovercellinactive” to “ms-SPLink ms-hovercellactive”, and that’s what creates the orange gradient background on “My Links” when you hover over it. Now if we look in the out-of-the-box core.css file, which is always on every SharePoint page, it has a CSS definitions for classes ms-hovercellinactive and ms-hovercellactive – here’s the extract from core.css:

.ms-HoverCellInActive,.ms-SpLinkButtonInActive
{
border:none;
margin:1px;
color:#4c4c4c;
vertical-align:top;
background-color:transparent;
}
.ms-HoverCellActive,.ms-SpLinkButtonActive
{
border:#6f9dd9 1px solid;
vertical-align:top;
background-color:#ffbb47;
background-image:url("/_layouts/images/menubuttonhover.gif");
}

So core.css defines the class as “ms-HoverCellActive” but in the HTML SPAN tag the class attribute is “ms-hovercellactive”. Does it matter that they have different case? Well, yes and no. Normally the SharePoint default.master page has no DOCTYPE definition at the top. This puts IE (8, not sure about 9) into Quirks Mode, and in Quirks Mode it ignores the case of CSS classes so it will render correctly. However, best practice in web design is to include a DOCTYPE and to take IE out of Quirks Mode. In my master page I’m using:

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

As soon as you put a DOCTYPE at the start of the page, and take IE out of Quirks mode, it starts to treat CSS class names as case-sensitive and expects the case to match. When you hover over “My Links” you lose the orange gradient background. To fix this, you need to define CSS for ms-hovercellactive and ms-hovercellinactive explicitly, in your own custom CSS file. ¬†You can either replicate what’s in core.css, or define your own CSS for these classes.

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: