SharePoint Branding Issues: Table Of Contents WebPart
On one of my projects I had to customize the table of contents webpart. This webpart can list pages, lists and subsites of a specific site, and this in a custom organization and presentation. When using it on the default master page, it shows the content in different levels with some nice indentation applied to it.
But when I activated my custom master page, the indentation suddenly did not show. My first reaction was: “OK, this surely is some classic CSS problem. I’ll just set the correct class back in my custom CSS file.” However, whatever I tried, whatever CSS rule I put in, the indentation did not come back. Worse, there’s already margin applied to the elements, hard coded in the webpart. But Internet Explorer did not seem to wanna show it when using my master page. And this was only the beginning…
When stripping down both the default master page and my custom master page down to the bare necessities (no css files, no other controls, … nothing), the default master page still showed the indents while my master page didn’t! And to get even more confused, the other MOSS master pages do not show the margins either! This is weird.. very weird. What the hell makes the difference?
And then it hit me. My master page and the MOSS master pages use following code, where the default.master does not:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
For those of you who do not know what this is, you can read all about it over here . Basicly, it instructs the browser how to parse the HTML and CSS. How is this relevant, you ask? Well, as I said, the table of contents uses some inline code to display the indentation.
<div style="margin-left:12;">
At first glance, this seems spot on, correct. Except, it isn’t. Though the default behaviour of Internet Explorer would accept this line. When using the doctype, Internet Explorer demands more precision and clarity. What kind of clarity? This kind:
<div style="margin-left:12px;">
Yes, indeed, it’s the unit. Doctype requires correct values and units. And if those are not available, the browser will simply ignore the values. So what are the implications? All MOSS master pages and custom master pages, using this kind of doctype, will not show the identations. Talking about a bug.. 
The solution, of course, is adding the ‘px’ unit to the style. Luckily, the table of contents is one of those webparts which uses XSL style sheets to format its data and makes those available in the Style Library within your SharePoint site collection. Once inside this style sheet (LevelStyle.xsl), one can easily add the px to the different styles using the margin. This creates an instant solution to the problem. If you want to apply this to your entire farm, go to your server and adjust the LevelStyle.xsl in the PublishingResources feature.
For the aftermath: this is sort of a silly problem. It could have been easily prevented. Nevertheless, these kind of problems are very hard to track down. My fear is this is not an isolated case and there could be more of those little ‘bugs’ within SharePoint, due to inconsistent use of CSS. This is quite a shame, I think, for such a rich product. 
But anyway, what have we learned today? Always set your units in CSS! See ya next time.
December 3rd, 2007 at 0:51
[...] But we did change the looks of it by changing how the looks are parsed. As I already mentioned in another article a couple of weeks ago, the other MOSS master pages use a (correct) doctype declaration, while the [...]
February 6th, 2008 at 5:01
Thank you!!!!! This has probably saved me HOURS of hell. This was exactly the fix I was looking for.
April 17th, 2008 at 23:15
How are you suppose to apply the changes? I’ve changed it in the publishing resources as well as the root library folder. Still nothing has changed, why is that?
April 18th, 2008 at 15:34
I’ve found my solution: delete and re-adding fix that.
Thank you for this, if you’re interested I would like to discuss other problem I’ve found when using a DocType. You seem like you know alot about this. I’ve been searching for info but to no results.
April 19th, 2008 at 2:00
I’m glad it worked out.
SharePoint is very tricky when adding the DocType, as you, no doubt, have experienced. Feel free to ask your question, maybe I can answer it!
April 28th, 2008 at 15:38
There seems to be a slowdown associated with the page scroll and hover on links when page is too heavy. It is a document IE7 only issue, and it is much more noticeable in sharepoint when you use DOCTYPE. Then again, I only started noticing it when my page got too heavy. Im still struggling to find a solution.
Anything similar on your side?
April 28th, 2008 at 19:58
Hmm interesting!
Can’t say I already experienced this behaviour.. Does it occur in IE8 too?
June 17th, 2008 at 17:12
Can you tell me how did u customise the Indent and added bulletins?
Is it possible to give different images for each site or to show the site icons in place of bullets?
July 7th, 2008 at 19:36
Yasotha>
If you want different images per item. You’ll have to use a custom written menu which attaches different CSS classes to different items.
The indents are achieved by giving the correct unit of measure.
GL!
September 17th, 2008 at 18:24
I recently had the entire Table of Contents just become empty on a few of my sites. No one has changed anything but for some reason I enter the base page and nothing shows up in the webpart… the only way to get them showing up again is in the config to have “show subsites” selected, anyone know why this happened?
September 18th, 2008 at 20:46
Hmmm. Kind of strange. Didn’t hear of such behaviour yet. If I come across it, I’ll definitely post about it!
It’s just one of those SharePoint mysteries.. :p
September 22nd, 2008 at 5:25
Hi Guys,
I am having a similar problem that I was trying to customize table of content web part in my subsites home pages by applying my own style sheet in the style library.I tried to solve the problem applying my style sheet on the LevelStyle.xsl but I did not see the change,I think I missed some steps would anybody help me with this?
Thank you
October 2nd, 2008 at 23:18
Did you publish the LevelStyle.xsl?
Tom
October 14th, 2008 at 18:24
Great article. Is it possible to get your source code to the customized TOC. I have been looking for a starting point for it and have come up empty so far in my searching.
October 23rd, 2008 at 10:39
The source code is in the article. The rest is standard SharePoint functionality!
Greets
Tom
January 30th, 2009 at 21:40
Hey tombo it was a nice article. But i have some diffrent requirement.
In Table of Contents webpart, when a link is clicked, i need to make that link highlighted. Moreover, if on clicking link “A” ( just for an example) in Table of contents webpart, it redirects to page “A” where Table of Contents is available, the link “A” should be highlighted in page “A”.
Will appreciate any help in this.
February 4th, 2009 at 23:51
Avinash, I think you may have to write or overwrite the webpart. I’m not sure such functionality is in there. The default navigation control does provide such a behaviour however.
Tombo
February 5th, 2009 at 17:10
Thanks for reply Tom.But Summary Link webpart class is sealed class( if am not wrong ..
), how can we extend thi swebpart properties or create a custom Summary Link webpart?
February 5th, 2009 at 23:22
oooopsssssssssss..! sorry for posting my just previous response…it was not related to my question earlier.
), how can we extend its properties or how can we create custom Table of Contents webpart. any help with source code would be appreciated.
Here goes my actual response ….
“Table of contents’ webpart class is a sealed class(if am not wrong