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.
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…
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 thon lines 438, 1492 and 2122, all with a width assignment.