Question

<form action="/signup" method="post">
<span class="new" style="vertical-align:middle;">Choose username:</span>
<input type="text" name="username" id="username"/>
<input type="submit" name="signup" value="Check" class="button height"/>
</form>

css:

#username{
background: url(/image/correct.jpg) no-repeat;
background-position:95% 8px;
background-size:18px;
padding-right: 35px;
vertical-align:bottom;
height:27px;

}

The problem is background-size and background-position does not work in internet explorer. What could be the alternative? I used

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/correct.jpg',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image/correct.jpg',
sizingMethod='scale')";

What is the solution plz?

Answer 1

Internet Explorer doesn’t support background-size!

The property, background-size is not supported by Internet Explorer. My best solution would be, giving the image a right padding, transparent or whatever the background colour is, using an image editor (Paint, or Photoshop) and then aligning the background image to right center.

#username{
    background: url(/image/correct.jpg) no-repeat right center;
    padding-right: 35px;
    vertical-align: bottom;
    height: 27px;
}