I came across an issue in one of my branded master pages recently. The problem was that with my system.master page turned on, the thumbnail view in the picture library would not display in the nice grid view, instead the thumbnails all displayed in a single column.
Here’s a little more information. This particular client wanted a fixed width design. Per my typical pattern, when I need a custom, fixed width, master page, I made a copy of one of the out-of-the-box versions, namely BlackBand.master, and its supporting style sheets. I began customizing from there.
I was pretty far along in my customization before I found the picture library problem. The problem had to be in one of classes I was overriding in my style sheet right? After all, this html is written out inside a web part. Wrong – A quick swap of the OOB style sheet for mine yielded a very ugly page containing the same issue.
Expletive!
OK, problem is obviously in my master page somehow. I resolve to begin swapping chunks of my master page into blackband.master until I find the breaking point. So I set the master page of my dev site to blackband.master and… Wow, that was easy, it’s broken already in the OOB stuff.
Expletive!
Is it the file system on the VM I’m using?? No: default.master – working, blackband.master – broken, default.master-working, blueband.master – broken.
Default.master
Blackband.master
So what’s different between these two master pages? A lot, but you won’t need to dig very deep, because right at the top, you’ll notice that the two fixed width master pages declare their doctype: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
While the default.aspx does not declare a doctype.
If you’re reading my crappy blog, you’ve undoubtedly come across Heather Solomon’s doctype blog entry in the past.
My solution was to change the doctype tag in my master page to render in quirks mode:
<!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN”>
Blackband.master with quirks mode doctype.
It fixed my picture library issue and, thankfully, did not cause too many other styling issues.
My client has a nice, homogeneous environment that is IE based. I have a feeling that this change could cause issues with other browsers.
BTW. SharePoint 2010 uses all strict, standards based rendering out of the box, so these issues shouldn’t exist there anymore.
Now, knock ‘em dead, killer.