IE7 does not center inline input inside absolutely positioned form

StackOverflow https://stackoverflow.com/questions/1801435

Question

The page experiences a peculiar failure when running in IE7 (strictly IE8 in Compatibility View). A similar error occurs in IE6 when I use XP mode (along with a few other errors), but I'm not too worried about IE6 compatibility.

Namely, the input box is left-aligned when it should be centred as an inline element. Relevant CSS:

form#prompt {
    position: absolute;
    height: 300px;
    width: 600px;
    margin: -150px 0 0 -300px;
    top: 50%;
    left: 50%;
    text-align: center; 
}

input#password { 
    margin: 10px auto;
    padding: 5px 10px;
    text-align: center;
    width: 398px;
    display: inline; 
}

Relevant HTML:

<form id="prompt">
    <input type="text" name="password" id="password" />
</form>

Now the really peculiar thing is that when you trigger the submit listener on the form, which returns false and initializes the callback $('#prompt_output').text(' ').css('opacity',0).text('Access granted. Loading...').fadeTo(200,1);, everything works. The input rights itself. In fact, even when the callback is just $('#prompt_output').text(' '), it works. Just selecting the element $('#prompt_output'); doesn't do anything.

Any help would be appreciated.

Was it helpful?

Solution

Without drastically changing the CSS/markup I think this solves the problem in ie7 (not tested in ie6).

Try wrapping the label around the input - I have no idea why it works and I have only tested in ie7, ie8 and firefox but it seems to do the trick.

<label for="password" class="instruction">
    Access restricted: enter password
   <br>
   <input name="password" id="password" type="text">
</label>

OTHER TIPS

I've run your page through an emulator and this is obviously an IE7 and previous versions problem. It works on FF and on IE8. But I think you already know that.

I suggest you do a quick & dirty fix - by adding onload to the <body> that will run $('#prompt_output').text(' '), just to set things straight. When you have the time to explore IE6/7 bugs, I suggest you try and change the layout, since I think IE doesn't know how to interpret your CSS properly.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top