Code won't work properly in Firefox or IE

Question

Here is what is supposed to happen:

The moment the user chooses an option a certain combination of input fields should show up along with two tables.

When the user fills in the input fields and clicks the button, the results should appear in the tables.

Those tables aren't showing up. The input fields don't even show up in js fiddle.

It only works in the newest versions of Firefox, Chrome, Safari and IE.

Not in firefox 6.0 or IE 9.08.

I made the mistake of coding exclusively in Chrome at home to discover that my code doesn't work when I tried to continue working at school.

I used jsfiddle.net to validate my code and did so successfully. Although it still won't work. It doesn't even show up properly inside jsFiddle.

Here is the fiddle to demo the code:

http://jsfiddle.net/Q2nz5/5/

Answer 1

The outputTable method contains line Caption.align = "middle", which cannot be executed in IE and apparently in FF as well. replace it with Caption.style.textAlign = "middle"; and it will fix the problem.

The same with MCaption.

But the best you can do here is to define all styles like that in css.

Answer 2

In your js fiddle you were getting this error: inputOutputCreator is not defined. It is because you are loading your js in the mootools onLoad function. Change it from onLoad to no wrap in the jsfiddle settings to the left. With that changed it worked just fine for me.