I have encountered a strange problem that I'm not 100% sure is totally CSS related or just a quirk in IE. Doesn't seem to happen in other browsers.
I am building a 3x3 table that contains a liquid header for a site. All cells have set widths except the center column which uses % so it can stretch when the browser is resized.
Here's the problem... when the browser reaches the point where the header first starts to stretch a tiny gap appears between column 1 and 2. Stretch the browser a few more pixels and it goes away. The leftmost column always retains it's precise fixed width except at the point where the table first starts to stretch. Stretch it a little more and it snaps back to its correct fixed width again.
It appears that IE has some trouble with its table math at that one point, but I'm not really sure if it's CSS or HTML tables that are causing this. The weird part is that this problem doesn't happen in a second page that's almost totally identical except for the cell and image widths. You can actually alt-tab between the two HTML files and see they are basically identical yet the wider header does not gap.
I'm not so much looking for a workaround, I've found a couple things I can do to hide this. What I'm really looking for is the reason it's happening so that in the future I can avoid doing this again... whatever it is that's causing this.
I've attached sample files of both for comparison. Thanks so much for any help you might be able to offer.