Desapareciendo en el botón de enviar en IE7

Question

Saludos.Estoy teniendo problemas con el siguiente código de la herencia.Está bien en todo excepto en IE7, donde el botón de enviar desaparece.Espacio que queda en la página, pero no se nota.He probado varias maneras de forzar hasLayout, pero sin éxito.Alguna sugerencia?

XHTML (XHTML 1.0 Strict DOCTYPE):

<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

Finalmente lo resolví eliminando:

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

Siempre había incluido esto con reemplazos de imágenes CSS después de leerlo en algún lugar hace años, pero dejarlo fuera no parece haber afectado a ningún otro navegador y ha solucionado el problema en IE7.

Answer 2

¿se ha asegurado de que display:block se haya agregado al CSS en la entrada? Eso debería hacer el truco.

Answer 3

Esto suena como un problema de sangría de texto / imagen para reemplazar el botón en IE6.0 y 7.0. Esta solución me ha funcionado varias veces.

Cree una hoja de estilo separada para estas versiones del navegador y coloque este código en su encabezado:

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

En el archivo CSS, intente algo como esto (puede cambiar esto para ingresar # btn_search o lo que sea que esté apuntando específicamente)

#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;
}

" color " debe ser del mismo color que su fondo.

" ancho " debería ser como 20-30 píxeles MÁS que el ancho de su imagen.

Puede encontrar más información y ayuda aquí: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution

Answer 4

Hay dos cosas que puedo ver en el código que podrían causar esto:

1 - la imagen btn.search.gif es completamente transparente, el color del fondo o no se encuentra. El botón no tiene color de fondo ni borde, por lo que no aparecería si no fuera por la imagen / texto

2: la visibilidad del botón se establece en none, lo que deja espacio en la página pero no representa el botón. ¿Puedes mirar los estilos en firebug?

Answer 5

si agrega un atributo de nombre , ¿funciona?

Answer 6

El problema probablemente proviene de la Guillotina Error.Es un bug en IE6 y IE7 que se produce cuando ciertas mezclas de :flotar, flotar, y el diseño están presentes (véase el enlace para más detalles).Creo que la inserción de este:

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

justo antes de </form> y, a continuación, aplicar la siguiente regla CSS es:

.clear {clear:both;}

sería arreglarlo.