Fix For Office 365 2010 Style Public Site When Chrome Updates Break Header

013114_1703_fixforoffic1If your site looks like this when viewed in Chrome:DO THIS!
Declare a height for the header element by adding this to your custom stylesheet:
.MS_MasterHeader { height:xxxpx; }
Adjust the xxx to suit your site.
What’s happening?
When Chrome updates to version 32.0.1700.76 m, you may notice the layout of your Office 365 2010 style public site’s header gets broken. The horizontal navigation and page content push up and obscure logo, title etc. I haven’t seen this problem in other web site platforms, so I’m pretty sure it’s a combination of the archaic table layout schema MSFT uses and changes to how tables are rendered by Chrome (see update). Since Chrome auto updates by default, it’s likely this will affect a lot of users and MSFT really has to do a better job of keeping up with browser changes.
If this doesn’t work for you, please post a question in my forum.
UPDATE: Another user had this problem but wasn’t using the header element at all, and when I dug into it a little deeper I found the specific cause is that Chrome doesn’t render the “rowspan” attribute correctly (or as other browsers do). MSFT uses rowspan to split a table column into more rows than other columns in the same table, for example a 3 row column next to a 1 row column. The workaround is to insert another table with multiple rows INSIDE a single row column of the “parent” table. That seems to trick Chrome into displaying it correctly.
If you want to apply that to the header element, you’ll have to make the adjustment to the master page in Sharepoint Designer (2010 sites) or using design manager (2013 sites).