You may have noticed an issue while specifying height percentages for tables and cells within SharePoint master pages, they don’t always work. The table height attribute itself  has never really been supported by the W3c, and the table row and cell height attributes have been recently deprecated. But why is it that they sometimes seem to work and other times they don’t, even when using the same browser… more importantly why are they so inconsistent in our master pages?

As it turns out most browsers will render the table, table row, and table cell height percentages just fine (maybe with some minor variances across different browsers)  as long as they are specified as part of the elements style. But there are a couple of tricks:

Did you provide a height for your html and body elements?…. It may come as a big surprise, but many browsers don’t automatically set the height of the body to be the same as the height of the window. Your table and or cell height may very well be expanding to 100% of the body, its just that the body itself its not 100% of the window; this can be easily solved by incorporating the following style in your pages or CSS:

html,body{ 
margin:0;
padding:0;
height:100%;
border:none }

You may be wondering why you haven’t run into this in the past, and perhaps it has to do with the next subject; the document declaration. I’ve seen some sample master pages that include only part of it, or don’t include it at all. If you’ve used some of those samples, the height issue… well it may not have been an issue at all. Why? Lets dig in a little deeper.

Check your document declaration, it declares what version of HTML is used in the document. The W3C provides 3 different declarations:

  • The HTML 4.01 Strict DTD – includes all elements and attributes that have not been deprecated or do not appear in frameset documents.
  • The HTML 4.01 Transitional DTD – includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation).
  • The HTML 4.01 Frameset DTD – includes everything in the transitional DTD plus frames as well.

Most (if not all) of the out-of-the-box master pages use the Transitional DTD. Its declared in each master page as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Failing to include this directive or declaration in your pages (or including it partially) tells the browser that the page follows no actual HTML standard.. or at least fails to tell the  browser which HTML standard the page follows. Either way the browser takes its best shot, and surprisingly tends to do a better job in understanding what we meant the page to look like. Now, you could remove the declaration altogether; but that would simply be the lazy way out. Including the declarations will probably result in your pages rendering better across existing browsers and next generation browsers.

Advertisements