Clever Geek Handbook

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

I am working with a jQuery dialog that contains a form. The ie6 has a couple of inexplicable inches of spacer over the form. When I remove the form from the markup, the most serious layout problems go away. I tried this without theme (default), Flora and my themeroller theme and they all seem to have the same problem.

I have tried various adjustments to the CSS dialog, but nothing has any effect, and a good amount of inline CSS is written when the dialog is created anyway, which prevents other styles from being applied.

I have tried setting css properties on the form itself, such as float, excluding margins and padding, displaying inline, etc., but as long as the form is 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 without a form tag.

Thank.

0


source to share


4 answers


Whenever I have to create a CSS theme for an existing site, forum, widget, etc., I always start by removing all stylesheets and normalizing all margins and padding to 0 for each main html DOM element. This is especially important when it comes to inline CSS.

What you should try is to remove any inline CSS in the form element itself. Then try something like:

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


Incrementing overflow in IE6 often solves many margin problems. Try temporarily setting borders for all html elements using the following style to see if any previous elements overflow into form space.

* {
    border: solid 1px #FF0000;
}

If you see borders superimposed on the shape, then you should also try to curb that element.

+4


source


Make sure your page has the correct doctype before changing your CSS .



If it doesn't have a doctype, the browser will render in 'quirks' and a lot of things don't look quite right.

+1


source


I had a similar problem with buttons and unexplained fields. IE6 has some elements that inherit the margins of their parent elements. Very strange...

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

+1


source


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).

0


source






More articles:


All Articles