2

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.

eggy
  • 2,836
  • 3
  • 23
  • 37
shar
  • 95
  • 1
  • 6

2 Answers2

6

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

urraka
  • 997
  • 7
  • 9
  • thank you very much, "vertical-align: top" fixed the strange issue, though I think it should have worked without it in the first place. also working in: http://jsfiddle.net/shahram/pgjAQ/ – shar Jun 17 '13 at 02:18
  • 2
    welcome to internet explorer, where many things should work but they just don't – urraka Jun 17 '13 at 02:23
  • Hello from the future! Where you just gave me the answer at the end of an ENTIRE day trying to fix a similar issue. I'm almost crying. – Zac Braddy Nov 23 '15 at 17:40
1

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>
Community
  • 1
  • 1
slice
  • 459
  • 1
  • 6
  • 19
  • thank you guys, "vertical-align: top" suggested by Perro also fixed my problem, I think that one should be better, though I can't point my finger at any advantages. this offset shouldn't exist in the first place in IE as it is with other browsers. – shar Jun 17 '13 at 02:31
  • @shar Also, make sure to mark the one that helped you the most as the answer and close this thread! – slice Jun 17 '13 at 02:37