IE8 displaying wrong piece of CSS sprite

Question

There are a million issues with sprites and IE8 i've read about online, however, they all seem to deal with the issue of the sprites not showing up at all. Mine is showing up, its just showing the wrong piece of the sprite. It works fine in all other browsers.

Heres the CSS

div.searchForm input[type=text] {
border: 0;
padding: 0 10px;
margin: 0;
background: url(../img/sprite.png) 0 -125px no-repeat;
background-size: 115% 235px;
width: 600px;
height: 30px;
float: left;
font-size: 12px;
color: #fff;
-webkit-appearance: none;
-webkit-border-radius: 0;
}

and the html:

    <section id="secondary6">
    <h1 class="hidden">Search</h1>
    <div class="clearfix">
        <div class="grid_4">
            <nav class="grid_2 secondary">
                <h1 class="hidden">Search Secondary Navigation</h1>
            </nav>
            <div class="searchForm">
                <input type="text" placeholder="search">
                <input type="button">
                <input type="submit" class="hidden" >
            </div>
        </div>
    </div>
</section>

basically you click the search button, and it displays a search bar that should be hidden otherwise. Like I said it works in other browsers.

Answer 1

IE8 doesn't support background-size (see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility), so that's what you'll have to work around. Depending on your needs, you might try IE7.js (which works with other versions of IE) or a conditional comment to adjust the position of the image for IE8. Or, just make sure your raw image doesn't need to be re-sized.

Answer 2

What happens when You assign class or ID to particular text input field?

for example..

 div.searchForm input.classInput {
   /* css code here */
 }

Also ...

..where is element form tag wrapper, form name, form action ?

The input fields should not reside in a document on a way You presented.. without form tag..

Which software actually generated this code for You? Is it dreamweaver?

---

Basic and proper example of valid HTML input form ..

<form id="formID" name="formName" method="post" action="#">
 <input type="text" name="textUno" value="" />
 <input type="text" name="textDue" value="" />
 <button type="submit" name="do_processing"> Go! </button>
</form>