CODEWITHSUNDEEP
htmlcssinternet-explorer
shar
shar

Reputation: 95

Strange input offset issue with Internet Explorer

I have a strange offset problem with IE (IE9 in particular) that doesn't go away, one input box has a higher offset (stands lower) than the other when there should be no reason to.

Here is a zoomed-in version where you can see the offset.

I have removed all the other elements including CSS styles, and I still can't get rid of this offset issue.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<form action="" method="post">
<input type="hidden" name="login" value="login" />
<input name="loginusername" style="height:16px;" type="text">
<input name="loginpassword" style="height:16px;" type="password">
</form>
</body>
</html>

Here is the first input and the box model from IE, which shows all the padding, margin and offset details.

Here is the second input box model from IE.

Upvotes: 2

Views: 6981

Answers (2)

Skip R.
Skip R.

Reputation: 459

I found the answer here: How do I get rid of an element's offset using CSS?. The offset is a value calculated by the browser, depending on the CSS. It matters on the value of the position style in the CSS. Therefore, the problem can be fixed by adding position:absolute; to the inline CSS.

Here's your revised code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<form action="" method="post">
<input type="hidden" name="login" value="login" />
<input name="loginusername" style="height:16px;" type="text">
<input name="loginpassword" style="height:16px; position:absolute;" type="password">
</form>
</body></html>

Upvotes: 1

urraka
urraka

Reputation: 1017

This seems weird, but you can try setting vertical-align: top in the CSS for the inputs. That fixes it in IE8, at least.

Upvotes: 6

Related Questions