Generating dynamic form with JavaScript: Looks different on IE8 vs Firefox or Chrome

JavaScript
1

i

I have created with JavaScript code for generating a forum dynamically, primarily using Tables and injecting rows and columns.

As an initial template, I have created an static HTML file and CSS stylesheet.

My JavaScript code generates the form just fine and it’s structure is exactly the same as the static HTML form, but it looks different on IE-8 from the static HTML document. The generated version has unexplanable extra padding around the rows and columns. When I view same generated form on either FireFox or Chrome, it is exactly as expected with no extra padding.

I looked at the styling applied through browser dev tools (FireBug and IE Developer Tools), and I can find nothing why this extra padding is occurring.

Are there other things I could do to determine my problem in viewing on IE-8?

Thanks

2

One of the main scripting issues with tables is adding rows to the table itself, when you need to instead add rows to the tbody element of the table.

Other than that, take the resulting HTML code and perform a comparison without scripting being involved at all. That will tell you if CSS is the cause of the problem, which leads to all sorts of useful solutions.