**How do I correct paddings (in this case padding-top) inside input fields in IE?**

So, I want to make a text field, ie. a search text field. This field has an search icon in the left side and the inputted text next to it, separated by a vertical line.

When the field is in `:focus`, I want show a tooltip saying: ie. "input text here". This text is *inside* the field and take about a third of the field's height.

So, when in `focus` i want to push down the inputted text in the field down by a third of the field's height, so i can show both the tooltip and the inputted text without having them overlapping each other.

I managed to do this with only CSS, and it works *correctly* in every browser but IE.

In IE, the inputted text was pushed down too much, so the bottom half of the text was missing because it was overflowing.

sample: <http://codepen.io/ayakashi/pen/emZVed>

**My Code: (CSS)**

```
.form-2 label{
  /*positioning icon in the left side of the text field*/
  position:absolute;
  padding: 0.5em 0;
  text-align:center;
  left:0;
  color: rgba(0,0,0,0.6);
  border-right: solid 1px rgba(0,0,0,0.1);
  width: 2.5em;
}

.form-2 .tooltip{
  font-size: 0.714em; /*10px*/
  text-align:left;
  padding-left: 1em;
  font-family:Calibri, Helvetica, sans-serif;
  font-weight:bold;
  color:white;
  width:21.7em;

  /*positioning tooltip in top of text field*/
  position:absolute;
  border-radius: 0 0.5em 0 0;
  margin-left: 3.5em;
  top:-0.5em;
}

input:focus{
  padding-top:1em;
}

input:focus, input:focus + .tooltip{
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  transition: all 0.30s ease-in-out;
}

```

**HTML**

```
<form role="form" class="form-2">
    <div>         
      <label for="exampleInputEmail1"><i class="fa fa-user fa-lg"></i></label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      <p class="tooltip">Username / Email address</p>
    </div>
</form>

```