Fix or workarount for jQuery dialog in IE6 - major layout issues when the dialog contains a form

Question

I'm working with a jQuery dialog that contains a form. In ie6, there are a couple unexplained inches of padding above the form. When I eliminate the form from the markup, the most serious layout problems go away. I've tried it with no theme (default), Flora, and my themeroller theme and they all seem to have the same problem.

I've tried making various adjustments to the dialog CSS, but nothing seems to have any effect, and a good amount of inline CSS is written when the dialog is created anyway that prevents any other styles from applying.

I've tried setting css properties on the form itself such as floating, eliminating margins and padding, displaying inline, etc but as long as the form's there, there is extra spacing. Has anyone been able to find a workaround for this? I'd rather not hack it and have form controls with no form tag.

Thanks.

Answer 1

Whenever I have to create a CSS theme for an existing site, forum, widget, etc. I always start by stripping out all the stylesheets and normalizing all my margins and padding to 0 for every major html DOM element. This is especially important when it comes to inline css.

What you should try is removing any inline CSS on the form element itself. Then try something like:

form {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

Taming overflow in IE6 often solves a lot of margin issues. Try temporarily setting borders on all html elements using the following style to see if any previous elements are overflowing into the form's space.

* {
    border: solid 1px #FF0000;
}

If you see the borders imposing on the form, then you should attempt to curb that element's overflow as well.

Answer 2

Before changing the CSS, make sure your page has a proper doctype.

If it doesn't have a doctype the browser will render in 'quirks' mode and many things will not look quite right.

Answer 3

I had a similar problem before with buttons and unexplained margins. There are some elements in IE6 that inherit the margins of their parent elements. Very bizarre...

Try this fix: http://blog.netscraps.com/internet-explorer-bugs/ie6-ie7-margin-inheritance-bug.html

Answer 4

Try something like this:

#yourDiv { padding:1.2em; margin-right:2.4em; }

where #yourDiv is the id of the div that contains your tags (I had this problem with inputs).