Trashed Table Layouts

Jun 29, 2009 at 7:58 PM

Why does the toolkit trash table layouts so badly?  Is there anything that can be done to stop it?

The story:

I have a control that I'm using in a non-FB application.  It's a dynamic control that uses a table to control the layout of the graphics because it can add and subtract "tabs" to the display programmatically.  When not in the FB toolkit (ICanvasMasterPage), the control renders perfectly (example #1).  I can even display it in facebook using raw HTML without any problems. 

I copied this control and attendant graphics into my facebook project and wow...  it blows the hell outta the tables.  Specifically, it seems to really not like the small transparent spacers I use (ts.gif).  They get a few extra pixels in height added on to them here and there which blows the table layouts (example #2).

Compare, if you will...

Example #1

Example #2

Is anyone else experiencing this joy?  Any suggestions as to how this problem can be resolved?


Jun 30, 2009 at 3:55 PM

A little more digging...

#1 - If you create a blank master page and use a table layout, the tables render properly.

#2 - There seems to be a minimum row height of 22 pixels.  That's what trashing the tables here.  I have shim rows that are 1 pixel tall and other rows that are shorter than 22 pixels.  All rows in a CanvasIFrameMasterPage will be at least 22 pixels in height.

#3 - it's not the included CSS file, I'm not using it.

I've downloaded the source and looked at the CanvasIFrameMasterPage.cs and CanvasIFrameBasePage.cs and don't see anything that would cause this, they are just extensions to the base class and don't seem to add any styling.  I'm trying to read through BasePageHelper.cs right now and see what's going on in there, but, I'm still baffled.

Anyone have some ideas?

Jun 30, 2009 at 6:08 PM

Added bonus!

Table layouts are not trashed in IE8 (I'm not able to check other versions of IE at this time).  They are only mangled in Firefox 3 and Chrome 1.


I don't know what to make of this yet...  maybe some kind of director in the header that IE doesn't (or does) read and the other's do the opposite?


Jun 30, 2009 at 6:16 PM


When I realized that it was only working in IE, I figured it might have something to do with the doctype and I was right.  Here's the solution...

The original Site.master comes with the following doctype line:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

Replace it with the doctype line that comes in a regular Ajax Master Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

Your tables will no longer be mangled.  :)  I don't know what the wider implications on this for the rest of the toolkit are, but, I'm glad this is over.