Div width causing bug in IE when created in jQuery

I'm creating a schedule/calendar view in HTML/CSS/JQuery to help me learn a few things about all three.

So, if you go to....

http://handtomouthmusic.co.uk/Test.html

...you can see the beginnings of it all. The "Static" view is just that, and the "Dynamic" view is created using jQuery.

The problem I face at the moment is that the width on the ".caption" class seems to be causing the ".bar" divs to disappear when viewed in IE? If you look in Google Chrome it should be fine.

As you can see in the example, it is only happening on the "Dynamic" section.

Any id开发者_开发百科eas what is causing this?

Note: If I press F12 in IE and disable the width attribute, then re-enable it, everything appears as it should? Why not when loaded?

The page renders in quirks mode because there is not DOCTYPE defined.

Set one so that the page renders in Standards mode.

It works fine for me although the static shows some problems then (that happens because you do not define a unit for the widths and positions, you should add px after the amount, so the inline widths should be 100px and not 100 etc..)