jQuery UI Dialog Issue With IE

Question

I am using the new jQuery 1.3.2 and jQuery-ui-1.7 libraries along with the UI Dialog. I have a div tag with several form elements (textbox, checkbox, etc.) in it. Upon pag

Answer 1

I was experiencing this same issue in IE7 and took a deeper look into the symptoms and solution. I noticed that when I created a dummy dialog with no content then the height rendered correctly. Thus, I started playing around with various types of content to see if I could write the content differently to overcome the issue. No luck. What I did discover, however, was that the more content I added, the shorter the dialog got in IE7 only (even hidden items shorten it a bit). Thus, simple content will likely not have much noticeable effect (and, thus, the lack of more complaints on this issue). The table and many form items I was adding create a very noticeable effect.

Setting the height to auto works somewhat well but IE7 still miscalculates the height on my content by about 10 pixels too short (possibly the padding height on an object) and thus jQuery adds the scrollbar. Not perfect, but acceptable given what follows.

Having failed to find another workaround, I started looking into the DOCTYPE solution. I discovered that our site's DOCTYPE -- although it looks correct -- it actually puts all browsers into "Quirks Mode" and that this is the true source of the issue. I doubt that jQuery supports quirks mode issues so I doubt this will ever be fixed.

My current DOCTYPE:

What it should be:

Even this older DOCTYPE worked:

Thus, it is not that the DOCTYPE must be the HTML 5 value of , it is that it must be a valid DOCTYPE (HTML 4 or 5 -- not sure about XHTML) that will set IE7 to something other than quirks mode (Firefox works okay either way). See:

http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types

I don't have the option to change our site's DOCTYPE so I have to use another solution such as auto height. I noticed there are other differences between quirks and standards modes when using the jQuery Dialog so I have to deal with those as well (namely, font-size percentages are accumulated differently in both IE7 and Firefox).