Использование изображения спрайта для окна ввода ввода

Question

EDIT: Вы можете увидеть окно поиска live here.

Прежде чем объяснить, позвольте мне показать вам код, я использую:

HTML

<div class="SiteSearch"> 
    <form action="/search" id="searchform" method="get"> 
     <input x-webkit-speech="" autocomplete="off" type="text" id="gText" name="q" id="q" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" value ='' "search" placeholder="Search.."/> 
     <input type="submit" id="gBtn"/> 
    </form> 
</div> 

CSS

#Head .SiteSearch { 
    top: 12px; 
    right: 0; 
} 

#Head .SiteSearch { 
    float: right; 
    position: relative; 
} 

input#gText { 
    float: left; 
    width: 225px; 
    height: 23px; 
    line-height: 24px; 
    text-indent: 5px; 
    font-family: arial,sans-serif; 
    font-size: 1em; 
    color: #333; 
    background: white; 
    border: solid 1px #D9D9D9; 
    border-top: solid 1px silver; 
    border-right: none; 
    vertical-align: middle; 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
} 

#searchform #gBtn { 
    background-image: url('search.png'); 
    width: 31px; 
    height: 27px; 
} 

#gBtn { 
    vertical-align: middle; 
    cursor: pointer; 
    width: 40px; 
    height: 31px; 
    line-height: 100%; 
    padding: 0; 
    font-size: 0; 
    text-indent: -999px; 
    color: transparent; 
    background-position: 0 0; 
    border: none; 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
} 

input#gBtn:hover { 
    background-position: 31px 0; 
    border: none; 
} 

Это, как поисковая коробка выглядит на IE7 против IE8/IE9:

против

Как вы можете видеть выше, кнопка ввода изображения не показывается в IE7. Как я могу это исправить?

Любая помощь приветствуется. Благодаря!

Answer 1

Я установил ее, изменив код CSS, как так:

#Head .SiteSearch { 
    top: 12px; 
    right: 0; 
} 

#Head .SiteSearch { 
    float: right; 
    position: relative; 
} 

input#gText { 
    float: left; 
    width: 225px; 
    height: 23px; 
    line-height: 24px; 
    text-indent: 5px; 
    font-family: arial,sans-serif; 
    font-size: 1em; 
    color: #333; 
    background: white; 
    border: solid 1px #D9D9D9; 
    border-top: solid 1px silver; 
    border-right: none; 
    vertical-align: middle; 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
} 

/* REMOVED THIS PIECE 
    #searchform #gBtn { 
    background-image: url('search.png'); 
    width: 31px; 
    height: 27px; 
}*/ 

#gBtn { 
    vertical-align: middle; 
    cursor: pointer; 
    width: 40px; 
    height: 31px; 
    line-height: 100%; 
    padding: 0; 
    font-size: 0; 
    text-indent: -999px; 
    color: transparent; 
    background-image: url('search.png'); /* ADDED */ 
    background-position: 0 0; 
    border: none; 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
} 

input#gBtn:hover { 
    background-image: url('search.png'); /* ADDED - BUT OPTIONAL */ 
    background-position: 31px 0; 
    border: none; 
} 

Answer 2

Напишите background вместо b ackground-image в вашей #gBtn кнопку. Может быть, это работа