jquery dialogs in quirks mode doesn't set height correctly

I am writing a jquery based widget that will go on another company's website. When I try to set the height of the dialog via $('#dialog').height(450), it sets the dialog to be much shorter. I'm able to get it about 450px high by using 300 (I know, 开发者_如何学Gomakes no sense). I've determine that the bug happens in IE8 in quirks mode. Yes, I know jquery doesn't support quirks mode. I can't change the doctype, since it's not my website.

Even though what I did worked, I need to understand why. Is there a definitive guide to how jquery works in quirks mode?

Have you applied padding to the dialog?

The box model is rendered differently if you're using quirks mode.

See http://www.quirksmode.org/css/box.html

You should try to avoid quirks mode, if possible. However, if that isn't an option, I've had success doing this: (I'm assuming that you're using jQueryUI)

$(".ui-dialog-content").css("height", "450px");

Which resizes the outer CSS of the jQueryUI dialog.

Try to add the this style rule and adjust the heigth to your requirements:

.ui-dialog { height:700px !important; }

Open the dialog with

dialog.dialog("open");

and set the heigth of the dialog to auto in order to adjust the inner content:

dialog.css("height", "auto");