Monday, October 30, 2006

Form submit button pops into place after focusing in a field (IE 5-6)

I was having trouble with the double-margin bug in IE5-6 with this same form. I don’t know if my fix is what’s now causing this blip, but here goes.

These are the conditions:
+ This is a simple login form: username , password, and submit inputs
+ All the fields of my form are contained in a <fieldset>
+ Each text input is wrapped in a <label>; each label is floated inside the fieldset
+ The submit button is wrapped in a div with style
    { text-align: right; clear: both; padding-top: .5em; position: relative; }

This is what happens:
+ When the page loads in IE5-6, the submit button starts off overlapping the text input above it (in this case the password field)
+ When the user focuses on a text input, the submit button magically slides into place

My easy solution:
I fixed the javascript that selects the first text input field when the page loads. The submit button is seen to pop into place, but it does this rather quickly, and since many pages look glitchy before things slide into place, I think this is an okay quick fix.

However, I do plan to explore what is going on here. Could be that I’m missing a hasLayout trigger. Will report back when I fix it.


Blogger western dave said...

I'm trying to deal with the same issue but the problem is I can't select or check the first one in the list. I have a list with labels and radio inputs that gets drawn. When I select one of them they all move over about 5px. Just in IE of course. Even in IE7. Anyway, I feel your pain. Still looking for a solution or at least a 'why'.

Tue. Nov. 14, 05:14:00 p.m. 2006  

Post a Comment

Links to this post:

Create a Link

<< Home