Reputation: 95
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
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
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