I made an input field with a button adjacent to it and a decorative arrow above the button that would point at it.
But it turned out that in Internet Explorer the length of the input field is shorter, and because of this, the arrow above the button to the right of the input shifts.

Code:

<div id="subs"> Your Email:<span class="arrow"><img src="greenarrow.png" width="60px" height="80px"></span><br> <input type="text" size="20"> <input type="button" name="press" value="Subscribe!"> </div>

Result in Google Chrome:

chrome

Result in IE:

ie

How can this be fixed?

    2 answers 2

    Set the CSS property width .

       .Subscribe { width: 100px; } 
       <div id="subs"> Your Email:<span class="arrow"><img src="greenarrow.png" width="60px" height="80px"></span> <br> <input type="text" size="20"> <input class="Subscribe" type="button" name="press" value="Subscribe!"> </div>

      In this case, the button in any browser will be the same size.