Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2006
    Posts
    33
    Thanks
    6
    Thanked 0 Times in 0 Posts

    IE - Two textboxes located at same position

    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?

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Feb 2006
    Posts
    33
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New Coder
    Join Date
    Feb 2006
    Posts
    33
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by 0x001A4 View Post
    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:
    Code:
    #passboxClear {left:107px;}
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    New Coder
    Join Date
    Feb 2006
    Posts
    33
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    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.

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by 0x001A4 View Post
    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?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    0x001A4 (05-07-2009)

  • #9
    New Coder
    Join Date
    Feb 2006
    Posts
    33
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.
    Thanks for the advice.

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    My pleasure! Good luck with the rest of the site build.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •