Having trouble with some of your pages in SharePoint 2013 rendering incorrectly at times, for no apparent reason? If so, you’ve come to the right place, provided that what I’m about to describe is actually your issue, and it’s not related to your html or css.
<div id="cbqwpctl00_" class="cbq-layout-main" />
Seems harmless right? It’s a content query webpart in SharePoint 2013 that doesn’t have any results, so this is the html it outputs. The issue, however, is that a div tag is not a self-closing tag, and browsers essentially look at it like <div>, which ends up changing the structure of your document, and will ultimately cause you rendering issues. How did it render in SharePoint 2010? The same exact way – with that self-closing div tag. Wondering why you haven’t seen this issue until now? In SharePoint 2010, tables were a primary part of the html that SharePoint output, and a table essentially protects this little accident from spilling onto the rest of your page. Thus, we never saw it in 2010 because when the webpart rendered it was inside of a table, and that protected the rest of the page. The browser essentially does understand the beginning and ending of the table, and so it is able to correct the initial behavior, and maintain your page’s overall structure.
A clean solution would be ensuring your xsl templates don’t render self-closing tags for html elements like div and span. A simple way to do this is showing text when there are no results. In fact, when you’re in edit mode, you’ll notice your page likely renders fine, and that’s because the default XSL does output a message when no results are found, but it only shows this message while in edit mode. It’s an easy fix to modify this portion of the XSL and take out the condition in the xsl:if statement that only applies the empty text during edit mode (xsl:if test=”$EditMode = ‘True’ … “). You could also switch this to an xsl:when / xsl:otherwise structure if you wanted to show different empty text to the editor versus viewer (Imagine utilizing style=’display:none’ on the viewer’s output so that they never actually see text, but the structure still remains correct)
Hopefully if you’ve come across this post and it solves your issue, you’ve arrived here sooner than later. I hope this helped out, and please feel free to leave any additional questions or observations in the comments.