IE6 Table cell alignment problem with ajax

Question

This one is weird,

I have a page that consists of a html table in a div called 'rates-viewer'. If you load this page in IE (6 or 7), you will notice that the contents of the table headers is misaligned over to the left.

http://tinyurl.com/666zcv

If you choose a country from the dropdown, it triggers an ajax call to a script. This script returns exactly the same html into the 'rates-viwer' div, to replace the original table.

The weird thing is that when it does so, the table header content is correctly aligned.

Why does loading the same html into the same div, cause my table header content to be corrected like this?

I assumed that my html differed slightly, I'm sure its the same.

Can anyone plase help with this one please, its causing me to frown a lot :) I basically need the original html to be lined up correctly, but I'm intrigued as to why this is happening.

The JS is a bit of jquery, and its in the wp-test.php source. My script that is called is rates-viewer-test.php, and the CSS is in main.css...

Answer 1

Have you tried using the jQuery call to load your initial values on page load? Have the jQuery call the function you use to load and then fade in those values, should give them the proper alignment.

I can't find a specific problem as to why they're initially off line. I only glanced at it though.

Answer 2

Your problem is in the way IE handles the columns when the width of the table is wider than the combined widths of the columns. Your table is 739px wide and your 6 columns are 95px (95 * 6 = 570) It looks like the default text alignment is center. Removing the widths for the columns in your css file should fix this issue.

BTW, I looked at your css file and found 3 locations where you are defining the widths for these columns. In fact, it looks like just about everything is repeated. You define .rates-section table th on lines 438, 1492 and 2122, all with a width assignment.