...

View Full Version : IE - Two textboxes located at same position



0x001A4
05-06-2009, 07:02 PM
I have a textbox and password box. I want them to be at the exact same position. When one is displayed, the other is not. The problem I have lies within IE. I start with the textbox visible and it has Password written in it. Someone clicks on it and it hides and the password box appears and takes focus and the user can enter their password.

I'm doing this with the css property display.

The problem is that in IE, when the password box shows up, it doesnt show up in the same spot as the textbox. It shows up about 4 pixels to the right. My guess is that this is happening because the first textbox is still there sort of, so the password box is as far left as it can get.

I've even changed the left property of the password box to be the same as the textbox but it doesnt change at all.

Any suggestions?

Rowsdower!
05-06-2009, 07:34 PM
Are you using position:absolute; or position:relative; for this?

Give us a link to the live test site of this or at least post your full html/css so we can tinker. Linking us to a live page is the better of these options of course.

0x001A4
05-06-2009, 07:56 PM
Here is the link: http://99.229.36.8/~mat/moviedb/

I'm not using position at all. I simply have the two textboxes on the page and then show and hide them as needed.

Rowsdower!
05-06-2009, 08:32 PM
Ok, it took me a minute but I see what you're talking about now. The password box gets replaced with a third input item on focus and in IE that replacement input shows up a few pixels to the right of where you would expect...

I think it has something to do with the "left" of 107px that is added to the replacement input item. If you use firebug lite in IE you can see that the original password input has a left value of "auto" whereas the replacement has a left value of "107px" (in FF this is set to left:190px; but it seems to be different for IE).

I would start looking there for a solution.

0x001A4
05-06-2009, 10:21 PM
Well that is definitely the problem. In my code I try setting the left value to that of the original input box but it has no affect at all. The value remains the same.

Why would that be?

Rowsdower!
05-06-2009, 11:11 PM
Well that is definitely the problem. In my code I try setting the left value to that of the original input box but it has no affect at all. The value remains the same.

Why would that be?

I don't see where you've tried that in the current code. Shouldn't you be adding something like this to your style sheet:
#passboxClear {left:107px;}

0x001A4
05-07-2009, 02:36 AM
I don't see where you've tried that in the current code.

It was in the javascript. I added a stylesheet similar to what you suggested and put conditional comments around it for IE since everything works fine in Firefox and Opera.

Rowsdower!
05-07-2009, 01:30 PM
It was in the javascript. I added a stylesheet similar to what you suggested and put conditional comments around it for IE since everything works fine in Firefox and Opera.

Ok, well just for laughs lets try it either in a conditional statement in the <head> of the HTML or else just toss it right into the CSS file. You can always remove it later.

I would see if that even fixes the problem in IE before I start rummaging through javascript to implement a change that might not even work, you know? ;)

0x001A4
05-07-2009, 05:36 PM
Well thats what I did. I added the conditional statement which includes a stylesheet saying the position is relative and to move it over 4px. It works fine. So no need for the extra javascript anymore. :D
Thanks for the advice.

Rowsdower!
05-07-2009, 10:40 PM
My pleasure! Good luck with the rest of the site build.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum