Desaparecendo botão enviar no IE7

Question

Saudações. Estou tendo problemas com o seguinte código legado. É bom em tudo, exceto IE7, onde o desaparece botão enviar. Espaço ainda resta para ele na página, mas ele não mostra. Eu tentei várias maneiras de forçar hasLayout, mas sem sucesso. Alguma sugestão?

XHTML (XHTML 1.0 DOCTYPE Strict):

<div id="headerFunctionality" class="clearfix">
<div id="headerSearch" class="clearfix">
<form action="http://foo.com" method="GET">
<label for="q">Search</label>
<input id="q" name="q" type="text" class="text" />
<input type="submit" id="btn_search" value="Search">
</form>
</div>
</div>

CSS:

#headerFunctionality {
    float: right;
    display: inline;
    margin: 24px 14px 25px 0; 
}

#headerSearch{
    float: left;
    margin-left: 20px;
    width: auto;
}

#headerSearch label{
    position: absolute;
    top: -5em;
    color: #FFF;
}

#headerSearch input.text{
    width: 133px;
    height: 18px;
    border: 1px solid #999;
    font-size: 0.69em;
    padding: 2px 3px 0;
    margin: 0 6px 0 0;
    float: left;
}

/* Replace search button with image*/
input#btn_search {
    width: 65px;
    height: 20px;
    padding: 20px 0 0 0;
    margin: 1px 0 0 0;
    border: 0;
    background: transparent url(../images/btn.search.gif) no-repeat center top;
    overflow: hidden;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* for IE 5.x */
}
form>input#btn_search { /* For non-IE browsers*/
    height: 0px;
}

input#btn_search:focus, input#btn_search:hover {

background: transparent url(../images/btn.search.over.gif) no-repeat center top;

}

Answer 1

Eu finalmente classificadas isto removendo a:

form>input#btn_search { /* For non-IE browsers*/
    height: 0px;
}

Eu tinha sempre incluído isto com substitutos de imagem CSS depois de ler isso em algum lugar há muito tempo, mas deixando-o para fora não parece ter afetado qualquer outro navegador e fixou o problema no IE7.

Answer 2

você a certeza de que display:block foi adicionado ao css na entrada? Isso oughta fazer o truque.

Answer 3

Isso soa como uma questão text-indent / botão de imagem para substituir no IE6.0 e 7,0. Esta solução tem funcionado para mim algumas vezes.

Faça um estilo separado para estas versões do navegador e colocar esse código em seu cabeçalho:

<!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

No arquivo CSS, tentar algo como isto (você pode mudar isso para entrada # btn_search ou o que você está alvejando especificamente)

#btn_search {
   width: 85px;
   height: 20px;
   padding: 20px 0 0 0;
   margin: 1px 0 0 0;
   border: 0;
   background: transparent url(../images/btn.search.gif) no-repeat center top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* for IE 5.x */
   font-size: 0;
   color: #fff;
   text-align: right;
   text-indent: 0;
}

"cor" deve ser da mesma cor que seu fundo.

"width" deve ser como 20-30 pixels mais do que a largura da imagem.

Mais informações e ajuda pode ser encontrada aqui: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution

Answer 4

Há duas coisas que eu posso ver a partir do código que poderia causar isso:

1 - o btn.search.gif imagem seja completamente transparente, a cor do fundo ou não foi encontrado. O botão não tem cor de fundo e sem borda, de modo que não apareceria se não fosse a imagem / texto

2 - a visibilidade botão está definido para nenhum, o que deixa espaço na página, mas não torne o botão. você pode olhar para os estilos no firebug?

Answer 5

Se você adicionar um atributo de nome , ele funciona?

Answer 6

O problema provavelmente vem do Guilhotina Bug . É um bug no IE6 e IE7 que ocorre quando determinadas misturas de: hover, float, e layout estão presentes (ver link para mais detalhes). Eu acredito que inserir o seguinte:

<div class="clear"><!-- --></div>

direita antes </form> e, em seguida, aplicar o seguinte CSS a ele:

.clear {clear:both;}

iria consertá-lo.