Friday, March 28, 2008

The Table Cell Box Model

Another Firefox vs. Internet Explorer behavior quirk, this time relating to how heights, padding, etc are interpreted on table cell (<td>) elements - The table cell box model, if you will.

Bruno Fassino (great CSS IE bugs/fixes page) has a test page up that demonstrates the behavior, and offers an explanation as to why I can't get cell height to be exactly the same in Firefox and IE7 on a table cell that has some padding all around it:

Results: height on cell (td) is interpreted as:

  1. content-box height in: IE/Win/standards, Saf3/standards, iCab4/standards
  2. border-box height in: IE/Win/quirks, Gecko 1.8+, Op9, Saf3/quirks, iCab4/quirks

I looked around, and there seems to be some confusion as to exactly what the proper behavior is.

The Solution

For now, it seems like the only fix is to have alternate CSS for IE7 (I recommend conditional comments, and a separate iehax.css file)

Disqus for A Nofsinger's Blog