I'm having an issue with a table that happens in FF2, IE6, Opera and Safari, so I'm assuming it's something fixable and I'm just in the dark. Demo links are toward the bottom.
I'm making a column-based table for comparing cars. The table's containing div has a fixed width and "overflow-x: scroll;", so that if the results (columns) returned by the server exceed the width of the table, the user can scroll horizontally to see the other columns.
Problem is, when the table is long enough to trigger the scrolling, the table cells shrink in width by 10 pixels. The cells in this case have a margin and padding of 0 with a fixed width. Check it out:
3 cells/columns, displays as it should:
6 cells/columns, each cell looses 10px in width:
Any ideas? I'm using unencoded ampersands and some star hacks that haven't been added to the IE6-only CSS yet, so these test pages won't validate, but all the browsers show the same issue so I don't think that's the problem.
Thanks a ton for any insight on this. Tough one to Google. :\