Just installed IE9, and immediately ran into a problem. I’ve stripped this down to the basics - it is, of course, part of a much larger page. I put the CSS into the <head> section just for easier debugging help.
In IE8 and FF, the table cells are all equal sizes within the table row. Not so in IE9.
I can fix it with an “IE8 emulate” kludge, but is there a better way? Thanks!
It appears the IE9 bugs are starting to come in.
Put a first row of “units” in there:
<table class="nav-table" cellSpacing="5">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="navbox" colSpan="2">One</td><td class="navbox" colSpan="2">Two</td><td class="navbox" colSpan="2">Three</td>
</tr>
<tr>
<td class="navbox" colSpan="6">One Thing</td>
</tr>
<tr>
<td class="navbox" colSpan="3">First</td><td class="navbox" colSpan="3">Second</td>
</tr>
</tbody></table>
Not sure if this is a bug, since there is no way you’d build a table where all rows are made of colspan columns. Still, it’s a different rendering. I wonder, because IE9 supports XHTML and you use a XHTML 1.1 DTD, changing the DTD to HTML 4.01, XHTML 1.0 or HTML5, this particular problem is present in all these DTDs?
Interesting. That does work, though it shifts the entire table down a few pixels.
But why wouldn’t you build a table like that? How would you produce the same result without doing so? I need a table in which there might be one “thing” in a row, two “things” in a row, or three “things” in a row, and I want everything to line up properly. It’s more complicated than this example, because it also has to behave itself if the table width is a percentage of the viewport, rather than a fixed number of pixels.
I wouldn’t because I don’t use tables for layout. 
Tabular data, the table normal use, is bound to have at least one complete row of columns. colspan would appear only by exception, whereas here you make it a rule.
The extra pixels are because of the additional “invisible” units row. It appears table-layout:fixed; is not properly understood by IE9.
I’m certainly open to better solutions. I’ve been avoiding scrubbing tables from my stuff because they’re so heavily embedded in the page design. How would you do this without a table?
First off, could you please test this problem putting other DTDs on the web page?
Here’s another solution, w/o a “units” row:
<table class="nav-table" cellSpacing="5">
<tbody><tr>
<td class="navbox" width="33" colSpan="2">One</td><td class="navbox" width="33" colSpan="2">Two</td><td class="navbox" width="33" colSpan="2">Three</td>
</tr>
<tr>
<td class="navbox" colSpan="6">One Thing</td>
</tr>
<tr>
<td class="navbox" colSpan="3">First</td><td class="navbox" colSpan="3">Second</td>
</tr>
</tbody></table>
And the problem is reported since some time ago:
It appears that, true to the algorithm explained in this article, IE will only respect column widths if they are present in the first row of the table
By MS def:
sLayout String that specifies or receives one of the following values:
auto
Default. Column width is set by the widest unbreakable content in the column cells.
fixed
Table and column widths are set either by the sum of the widths on the col objects or, if these are not specified, by the width of the first row of cells. If no width is specified for the table, it renders by default with width=100%.
No difference with, for example:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
Besides that, as I’ve said, this is part of a much larger site, and the DOCTYPE is simply not negotiable.
Here’s another solution, w/o a “units” row:
That actually works with width=“1”. In effect, it functions as a minimum width spec. I’ll have to run it through IETester to see if IE7 or IE8 chokes on it (I’ve abandoned all attempts to satisfy IE6!).
Hmmmm… IE7 doesn’t like that one. It ends up ignoring the text-align: center!
Probably because of “1”. Try “33”.
I did. Any value produces the same result.
You know, this is all on one page - you could just copy it and tinker!
You know, I really miss IE7 since it has gone from my comp. Sorry to be such a bother. Bye bye. 
So far, the only thing that seems to be working across all browsers, without producing any stray visual problems (like extra space), is to plant this in the <head> section:
<meta http-equiv=“X-UA-Compatible” content=“IE=8” />
However, I have no idea what happens in Safari. One of these days, I need to grab a Mac Mini, just for testing.
Usually, I just use IETester. I do have one 9-year-old beast of a PC kicking around on which I’ve purposely kept native IE7, just to make sure. But IETester has proven to be pretty reliable.
IE7 users are still representing something like 8% of my site visitors, so I can’t quite get away with ignoring them, yet, as much as I’d like to.
I said:
Sorry you’re so easily offended. I’m just looking for help.
Anyone else?
For anyone else following this discussion from the cheap seats, I’ve got another kludgy but seemingly effective solution. Start with noonnope’s “empty row” solution, which does get the cell widths right in all browsers (at least I think it does - Safari seems to behave itself with the original layout, according to an in-law who took a quick look for me).
But then, how to get rid of the extra space at the top of the table? I first tried “display:none” on the empty row, but that defeated the solution entirely. So, I wrapped the whole table in a <div> and set margin-top: -7px. The value is -1 * (2 + cellspacing). It seems to work everywhere.
Now the key question: which kludge is less offensive? 
Instead of using an empty row at the top, you can add width as % to the existing cells using CSS:
.col2 {
width: 33.3%;
}
.col6 {
width: 100%;
}
col3 {
width: 50%;
}
HTML markup:
<table class='nav-table' cellspacing='5'>
<tr>
<td class='navbox col2' colspan='2'>One</td>
<td class='navbox col2' colspan='2'>Two</td>
<td class='navbox col2' colspan='2'>Three</td>
</tr>
<tr>
<td class='navbox col6' colspan='6'>One Thing</td>
</tr>
<tr>
<td class='navbox col3' colspan='3'>First</td>
<td class='navbox col3' colspan='3'>Second</td>
</tr>
</table>
That does appear to work in all browsers!
Alas, it doesn’t fix the other IE9 “uglies” I’ve told you about (Hilde and I know each from another forum entirely). The iframe problem is particularly awful, and I haven’t even mentioned the little swffit.js glitch I’ve run into!
That actually looks like quite a neat solution since it effectively tells the browsers that even though there are no single columns in the table that if there were they’d all be the same width.
Jeff, if you post that problem in the JavaScript forum there are several people here with lots of JavaScript knowledge so someone ought to be able to figure it out.
I spoke too soon. Hilde’s solution doesn’t work if the first row is a “col6.” That seems to throw IE9 right back into the soup. 
It’s also giving me some small centering problems that are very noticeable in the context in which this table appears (adjacent to other things that are centered more precisely).
Others have run into problems with swffit.js. I’m pursuing that one with the author, who’s thinking that it may be time for a new version.