views:

2103

answers:

4

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.

+4  A: 

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.

Soviut
I was an idiot, after much headache I finally discovered that the problem was actually set in my ie6 css file, in a different place - I was applying a large top margin to the form tag. So this method of diagnosing would have fixed the problem. I actually did do this, but not in my ie6 style sheet!
RaeLehman
So mark mine correct and give me the rep ;) hehe
Soviut
+1  A: 

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.

rhild
A: 

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

Dan
A: 

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

tanathos