IE6 table cell alignment issue with ajax
This is strange,
I have a page composed of an html table in a div called "rate-viewer" . If you load this page in IE (6 or 7), you will notice that the contents of the table headers are shifted to the left.
If you select a country from the dropdown, it will invoke the ajax call to the script. This script returns exactly the same html in the "rates-viwer" div to replace the original table.
The weird thing is that when it does this, the contents of the table header are correctly aligned.
Why does loading the same html in the same div cause the table header content to be corrected like this?
I assumed my html is slightly different, I'm sure it is the same.
Can anyone help with this please, it makes me frown a lot :) I basically want the original html to line up correctly, but I'm intrigued as to why this is happening.
JS is a bit of jquery and its source at wp-test.php. My script called rate-viewer-test.php and the CSS is in main.css ...
source to share
Your problem is how IE handles columns when the table width is wider than the combined column widths. Your table is 739px wide and your 6 columns are 95px wide (95 * 6 = 570). It looks like the default alignment is center. Removing the column widths in the css file should fix this issue.
By the way, I looked at your css file and found 3 locations where you define the width for these columns. In fact, it looks like everything is repeating itself. You define .rates-section table th
on lines 438, 1492 and 2122, all with width assignments.
source to share
Have you tried using a jQuery call to load your initial values on page load? Ask jQuery to call the function you are using to load and then fade out at those values should give them correct alignment.
I cannot find the specific problem as to why they were initially disabled. I only looked at it though.
source to share