Steven Xu Steven Xu - 5 months ago 11
HTML Question

IE7 does not center inline input inside absolutely positioned form

I've put up the standalone page at http://stevenxu.ca/uploads/layouttest.php.

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. I've loaded jQuery into my sample page in case anyone wants to use that to play with.

Answer

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>
Comments