Slides and code from my branding presentation at SPTechCon

John Ross and I presented “Demystifying SharePoint Branding” as a half day presentation for SPTechCon Boston 2009 yesterday. We had a great turnout and hopefully everyone got a good introduction to the SharePoint branding process. The slides and the code samples are available here:

Branding Demystified Slides – SPTechCon Boston 2009

Branding Demystified Code Samples – SPTechCon Boston 2009

Edit in Datasheet causes IE to crash – Problem Solved

Ran into a very strange “perfect storm” type of error in SharePoint tonight. When a custom master page is applied, editing a list in Datasheet View causes IE to just hang. The thread goes bananas and you have to fight with Task Manager to kill the process. I’m not sure I completely understand WHY this problem occurs, but I do have a pretty good idea how to fix it.

Turns out you won’t see the problem unless some very specific scenarios are in place. If the custom master page has a DocType declared (which they all should) AND the parent HTML objects that contain PlaceHolderMain have ANY bottom padding applied OR there are any elements below the PlaceHolderMain inside of the same parent object (like a footer or Table cells) then for whatever reason the JavaScript that runs the Datasheet View gets confused and jumps into an infinite loop.

If you run into this problem, you have basically two options:

1. You can methodically remove all bottom padding or objects below the PlaceHolderMain -OR-
2. Add some overriding JavaScript to the master page that will correct the offending function.

 

I spent a LONG time studying this problem before this link helped me figure out what is going on:

http://tomblog.insomniacminds.com/2008/07/23/sharepoint-branding-issues-edit-in-datasheet-view/

I think getting rid of all the bottom padding and lower objects is a better solution, but I could imagine there could be instances where its not possible. In those cases, here is the JavaScript that can fix the problem. Make sure to place it after core.js in your master page:

<script type="text/javascript">

function GCComputeSizing(GCObject)
{
if (TestGCObject(GCObject))
{
  var fBIDI=(document.documentElement.currentStyle.direction=="rtl");
  var lGCWindowWidth=document.documentElement.scrollWidth;
  var lGCWindowHeight=(document.documentElement.scrollHeight>document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.documentElement.scrollHeight;

  var lGCObjectOffsetLeft=0;
  var lGCObjectOffsetTop=0;
  if (fBIDI)
   {
   lGCObjectOffsetLeft=-180;
   lGCObjectOffsetTop=120;
   }
  else
   {
   lGCObjectOffsetLeft=32;
   lGCObjectOffsetTop=-2;
   }
  var lGCObjectWalker=GCObject.parentElement;
  while (lGCObjectWalker !=document.body)
  {
   lGCObjectOffsetLeft+=lGCObjectWalker.offsetLeft;
   lGCObjectOffsetTop+=lGCObjectWalker.offsetTop;
   lGCObjectWalker=lGCObjectWalker.offsetParent;
   if (fBIDI)
    if (lGCObjectWalker.offsetLeft > 0)
     break;
  }
  lGCObjectOffsetLeft+=GCObject.parentElement.offsetLeft;
  lGCObjectOffsetTop+=GCObject.parentElement.offsetTop;
  glGCObjectHeight=lGCWindowHeight - lGCObjectOffsetTop;
  if (glGCObjectHeight > lGCWindowHeight)
   glGCObjectHeight=lGCWindowHeight
  if (glGCObjectHeight < cGCMinimumHeight)f
   glGCObjectHeight=cGCMinimumHeight;
  if (fBIDI)
   {
   glGCObjectWidth=lGCWindowWidth+lGCObjectOffsetLeft;
   }
  else
   glGCObjectWidth=lGCWindowWidth - lGCObjectOffsetLeft;
  if (glGCObjectWidth > lGCWindowWidth)
    glGCObjectWidth=lGCWindowWidth;
  if (glGCObjectWidth < cGCMinimumWidth)
   glGCObjectWidth=cGCMinimumWidth;
}
}

</script>

What’s New in the OOTB Master Pages for SP2 of SharePoint

If you live under a rock you may have missed all the news lately about the release of Service Pack 2 for Windows SharePoint Services 3.0 (WSS) and Office SharePoint Server 2007 (MOSS) (more info on SP2 here).

Among the listed updates is this note: “The 2007 Office Suite SP2 has been tested and is supported for Internet Explorer 8”.

I figured I would fire up a VM and compare the OOTB master pages (both source and output) between the pre and post SP2. Here are the results:

• default.master – Source unchanged
• blueband.master – Source gains: <meta http-equiv="X-UA-Compatible" content="IE=7"> which will help force IE8 to render the page in IE7 mode. Note, if you manually force IE8 to render in IE8 mode the navigation still has issues displaying. For more info, see my previous post about IE8 and SharePoint.

 

• default.master & blueband.master rendered page – They both gain an inline style for the Global Links section:

    <div style="white-space:nowrap;">...</div>

The addition of the meta tag and the style are both good things to have as I usually end up adding both to my master pages. The later helps with the vertical alignment of the Global Links in Firefox. I stole a screenshot of what this style fixes from Heather because I’m too lazy to make one myself:

That’s pretty much all I see on changed on the most basic of tests. I’m sure there is a lot more changed under the covers and on other pages (my test only included default.aspx). Let me know if you find some more.

Using the XML Web Part to show your Twitter feed in SharePoint

I have put together a quick and dirty example of using the XML Web Part to display and style your Twitter RSS feed in a SharePoint page. 100% of the work is done in XSLT, all you have to do is:

• Add an XML Web Part to your page:

 

 

• Then for the XML Link add the RSS feed for your Twitter updates, the link for this can be found on the bottom right of your Twitter home page:

 

• Just right click on the RSS feed and copy and paste the the URL into the XSL Link field of the XML Web Part. (mine is http://twitter.com/statuses/user_timeline/15901109.rss)

 

• Next, click the XSL Editor button and paste in the following XSLT code:

 

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet
     version="1.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
     <xsl:output method="html" />
     <xsl:template match="rss/channel">
        <style type="text/css">
            .twit_tweet a {
                font-size: 13px;
                color: #111111;
                width: 400px;
            }
            .twit_date {
                font-size: 12px;
                color: #333333;
                font-style: italic;
            }
            .twit_holder {
                padding-bottom: 15px;
                width: 500px;
            }
        </style>
        <xsl:apply-templates select="item" />
     </xsl:template>

    <xsl:template match="item">
        <div class="twit_holder">
            <div class="twit_tweet"><a target="_blank" href="{link}"><xsl:value-of select="description" disable-output-escaping="yes"/></a></div>
            <div class="twit_date"><xsl:value-of select="substring-before(pubDate,' +0000')" /></div>
        </div>
    </xsl:template>
</xsl:stylesheet>

• After you click OK and Apply your changes you should see your tweets styled in the XML Web Part:

 

• You can adjust the CSS in the XSLT to change the way the tweets look. Also, if this blows up your site, don’t say I didn’t warn you. I haven’t really tested it in production. Have fun!

What you should do when Microsoft pushes the Automatic Update to IE8

Microsoft has finally announced that they will be pushing automatic updates to IE8 for PC’s that are currently running IE6 or IE7 (more info here). This is great news, as I had a very long winded post already typed out (but not published) entitled “IE6 Needs to Die (or why IE8 makes me sad)”. I won’t go into great detail about the post now that I see Microsoft is being proactive with trying to upgrade older Internet Explorers.

I do have a helpful graphic for people that will be seeing the new Update to IE8 welcome screen. If you have any doubts about what to do on this screen follow my expertly crafted graphic instructions:

I know some folks are on intranets that have requirements for older versions of Internet Explorer, but I implore you to consider clicking the button. Here is some info from my unpublished rant:

“Now that IE8 has been released, something official needs to happen with IE6. It needs to reach its end of life… Microsoft should stop supporting it and encourage folks to upgrade. Why do I feel this way? Well, with IE8 and the latest Firefox, Safari, Opera, and Chrome browsers, we as designers can finally strive for true table-less / w3c compliant design with good confidence that almost any modern browser will handle things pretty darn close to the same as its siblings. This is great… EXCEPT when you start to consider the various browser market shares. There are several different sites that provide these statistics and they don’t all agree on actual numbers, but most agree that IE6’s market share is still 18% – 20%! To put this in perspective, Firefox (2 + 3) is about only about 22% – 25%. This means that we as designers still cannot ignore IE6. This would be practically equivalent to ignoring Firefox, and no one would argue this. The amount of effort that goes into supporting non standards compliant browsers like IE6 factored across the globe I bet is quite significant.”

By clicking this button, you are in fact helping propel the interwebs towards a more standards based browser / platform neutral utopia. Do your part for human kind, Al Gore would be proud of you. </End of Rant>

Upcoming SharePoint911 Training

Just a quick note to point out some upcoming training in Cincinnati, OH. On July 2nd, SharePoint911 will be offering a SharePoint Planning and Governance class as well as a Business Users Guide to SharePoint Server 2007.

SharePoint911 Training

Problems with IE8 Standards Mode, SharePoint menus, and DocTypes

With the official release of Internet Explorer 8, many people are starting to test their custom SharePoint branding in the new browser. IE8 is an interesting animal in that it decides its rendering engine based on certain criteria in your code (in SharePoint’s case, the master page):

• If IE8 sees a valid DocType declared it will attempt to render a site in IE8 Standards Mode.
• If IE8 does not see a DocType it will attempt to render a site in quirks mode (otherwise known as pre IE7 rendering mode).

 

One nice thing about IE8 is that it includes Developer Tools (click Tools > Developer Tools) which will actually show you which rendering mode is currently being used (the last tab at the top of the Developer Tools window). You can also use this tab to test the other rendering modes, selecting them and observing the result in the refreshed window.

Now, on to the topic of SharePoint master pages. Some Microsoft out of the box master pages (like default.master and the horizon master pages) do not have a DocType declared and will render in quirks mode by default in IE8 (which is how they should be rendered because the master page html is coded that way). Some other Microsoft out of the box master pages (like BlueBand.master) DO have DocTypes declared. For these master pages (and for ones like default.master if you were to add a DocType to them,) IE8 will automatically attempt to render them in IE8 Standards Mode. This is bad because from all of my initial testing, the out of the box SharePoint menu’s can not show dynamic menu items (otherwise known as fly-outs) in IE8 Standards Mode. They appear as just white boxes without a link to click on.

To correct this problem the IE8 team has given us two meta tags:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

The first will force a page to render in IE7 mode no matter what, and the second forces a page to render as IE7 would have rendered it historically. The difference being the EmulateIE7 meta tag will force the browser to look for a DocType before rendering in IE7 mode and if it does not find one it will render in Quirks Mode. This is the correct behavior for how IE7 used to render pages and I believe the correct one that should be added to all custom current version SharePoint  master pages.

So in closing, if your custom master page (or even your BlueBand based master page) is going to support IE8, you should seriously consider adding this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Be sure to check-in a major version / publish and approve the master page after you add the tag. Also, you may have to restart your IE8 before the change will be picked up (mine cached the old version of the page and for a while I thought the meta tag wasn’t working).

Update 4:

There is a Hotfix though that should fix the problem:

http://support.microsoft.com/?id=962351

 

UPDATE 3: Many people have been keen to tell me that SharePoint SP2 supposedly fixes this problem. The only thing I can see being done in SP2 is that now all of the out of the box master pages have the above meta tag added. You are still left to your own devices for your custom master pages.

UPDATE 2: I should also point out that you can solve this problem at the web server level if you don’t want to modify your master page. Note: I prefer the master page method since it is more absolute, no chance for accidental changes (but I know some folks that can’t edit their master pages). There is information and links for doing this at the bottom of this link: http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

UPDATE 1: Eric Lawrence (creator of the awesome Fiddler application) points out that intranet sites are rendered in IE8 by default in compatibility mode so the meta tag technically isn’t required in these environments. Note: according to IE team’s blog an intranet site is determined based on its local URL, not by IP address. So if users browse your intranet site via IP address or external URL they will see the site NOT in compatibility mode by default.