CODEWITHSUNDEEP
htmlcss
gaurav ranjan
gaurav ranjan

Reputation: 47

Input text alignment is behaving differently in different browser

I am using box for token code purpose but input text alignment is coming different in different browser. In Chrome:

enter image description here

In Internet Explorer:

enter image description here

My code for input text and for box is below:

<style>
input.box {
	height: 9px;
	padding: 3px 3px 8px;
	border: 1px solid #999;
	width: 145px;
	padding-top: 4px;
}
</style>


<input path="token" id="token" tabindex="2" maxlength="35" class="box"
								placeholder="token"  />

we can see the bottom space is more in Chrome compare to Internet Explorer in the box.

Please let me know, how to fix this?

Upvotes: 1

Views: 339

Answers (4)

core114
core114

Reputation: 5325

Assuming you mean you can use the line-height CSS property to do this. Simply set it to be the same as the height of the element.

Upvotes: 1

Matthias Seifert
Matthias Seifert

Reputation: 2073

Since <input> Elements, or form elements in general, depending on the browser itself, it is up to the browser (and the operating system), how they look. So for example padding is supported by Chrome and Firefox on Windows, but the IE does not support it.

As a workaround, you could add a line-height, look at the example below:

input.box {
    height: 9px;
    padding: 3px 3px 8px;
    border: 1px solid #999;
    width: 145px;
    padding-top: 4px;
    line-height: 8px;
}
<input path="token" id="token" tabindex="2" maxlength="35" class="box"
								placeholder="token"  />

Upvotes: 1

vishnu
vishnu

Reputation: 2948

You can edit the CSS like this answer:

input.box {
  height: 15px;
  padding: 5px;
  border: 1px solid #999;
  width: 145px;
  vertical-align: middle;
  display: inline-block
}
<input path="token" id="token" tabindex="2" maxlength="35" class="box" placeholder="token" />

Upvotes: 1

wscourge
wscourge

Reputation: 11281

Use line-height instead of padding for the IE.

Upvotes: 0

Related Questions