Steven Xu Steven Xu - 1 year ago 69
HTML Question

IE7 does not center inline input inside absolutely positioned form

I've put up the standalone page at

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" />

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
doesn't do anything.

Any help would be appreciated. I've loaded jQuery into my sample page in case anyone wants to use that to play with.

Answer Source

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
   <input name="password" id="password" type="text">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download