CSS submit

[netovs]

Saludos, espero alguien me pueda ayudar con un dolor de cabeza de CSS.

La cosa es así:

Tengo un CSS definido para lo que será un botón submit:

Código CSS:

.contactSubmit
{
cursor:pointer;
    background-color:transparent;
    background-image:url(./images/qa_bottom.png);
    background-position:center center;
    background-repeat:no-repeat;
    border:medium none;
    color: rgba(0, 0, 0, 0);
    height:90px;
    font-size: large;
    font-color: #fff;
    margin-left:100px;
    padding:0;
    text-align:center;
    width:90px;
    z-index:1;
}
 

Y al momento de utilizar esta hoja de estilos en FireFox, Chrome e incluso Opera utilizo este HTML tag:

Código HTML:

<input type="submit"  class="contactSubmit" />
 

Sin utilizar el parámetro value=""

Como lo mencione antes en navegadores de verdad funciona de mil maravillas SOLO se ve la imagen y hace el Submit.

Sin embargo en IE 8 me sobre escribe un texto en el botón generado con submit lo raro es que no muestra en el codigo fuente del HTML el parámetro value

[netovs]

Bueno, gracias a todos los que dedicaron un par de minutos a la lectura de mi pregunta.

Logre hacer que Internet Explorer no coloque el texto sobre mi lindo botón CSS

Todo se queda igual solo cambié:

Código CSS:

font-size: large;
 

POR

Código CSS:

font-size: 0px;
 

Y asunto resuelto.

[ArturoGallegos]

en primera tienes dos errores en el css

color: rgba(0, 0, 0, 0); debe ser -> color: rgb(0, 0, 0);

font-color: #fff; la propiedad font-color no existe en css para asignar color al texto se usa color:#fff que se contra pone con la etiqueta que pusiste en rgb

y bien define en el botón así:

Código HTML:

<input type="submit" value="enviar" class="contactSubmit" />
 

y tu css:

Código CSS:

.contactSubmit
{
cursor:pointer;
    background-color:transparent;
    background-image:url(./images/qa_bottom.png);
    background-position:center center;
    background-repeat:no-repeat;
    border:medium none;
    height:90px;
    font-size: large;
    color: #fff;
    text-indent:-300px;
    margin-left:100px;
    padding:0;
    text-align:center;
    width:90px;
    z-index:1;
}
 

con text-indent:-300px; haces que el texto salga de cuadro y no sea visible

[kseso?]

Editado:
Ag666 ya apuntó los errores.

Sólo añado que si va a utilizar font-size:0; se cure en salud y añada el line-height:0;
Y utilice la forma acortada para el background.

Por cierto, Ag666, el valor rgba si es válido en css (ver. 3). Pero su razón de ser es utilizar el cuarto valor para la transparencia y que versiones antiguas de los navegadores e ie no lo soportan (ahora no recuerdo si tampoco el 8).

[ArturoGallegos]

Iniciado por kseso?

Por cierto, Ag666, el valor rgba si es válido en css (ver. 3). Pero su razón de ser es utilizar el cuarto valor para la transparencia y que versiones antiguas de los navegadores e ie no lo soportan (ahora no recuerdo si tampoco el 8).

gracias por la observación... pasare a revisar las nuevas propiedades css 3 creo que me quede un poco atrás, aun no conocía la existencia de rgba

[netovs]

Cierto:
El porque de este codigo:

Código CSS:

color: rgba(0, 0, 0, 0);
 

Era por que de alguna forma desesperada en que el texto del value que no puse en ningun momento en mi submit era para poder hacerlo transparente, el font-color era alguna idea de un diseñador de algo así como 100 años de edad y veo que no le atino.

En fin llegamos a buen termino con este mensaje.

Gracias a todos.

[Portgaz]

Bueno no se si todavia es valido, pero en vez de usar input submit, no usas input image

Código HTML:

<input type="image" src="Image.png" width="000px" />
 

y otra observacion tambien.
Si la class contactsubmit la usas solamente para el input submit, para que definir entonces valores de la font?

Saludos

[ArturoGallegos]

compañero Portgaz, no es que sea valido o no usar un input image para dicha función pero en lo personal considero mas limpio usar el input sumit y modificarlo con css, esto porque si uso un input image tendría que buscar algo de java para realizar la funcion del submit y eso es un trabajo innecesario... ñ.ñ como dicen los abuelos sale mas caro el caldo que las albóndigas

en cuanto a definir valores para el font si no mostrara el texto es buena pregunta, creo que simplemente fue un despiste y al final no afecta en nada

[Portgaz]

Ok ok entiendo Ag666
Si a lo que te refieres con Javascript y el trabajo innecesario, es darle el efecto de "pico boton y se sume", mejor utilizas el input submit. Esta bien.

E inclusive lo tendre en cuenta para mis proyectos también ñ.ñ
Saludos.

[ArturoGallegos]

"pico boton y se sume" ?¿ no entendí muy bien eso jeje me sonó a albur

En fin la función del submit es enviar los datos recopilados de todo el formulario para ser procesados, y dicha función puede ser reemplazada pero es algo innecesario cuando existe algo que ya lo hace automáticamente.

Aparte imagínate un formulario grande ¬¬ me da flojera de solo pensarlo

[netovs]

Bueno gracias a todos por sus comentarios y apoyo, sin duda es una polemica bastante buena entre usar submit o image.

Lo raro de todo esto era que aun cuando mi submit NO tenia value en IE mostraba el texto "Enviar consulta" por arriba de mi imagen y eso me trajo un dolor de cabeza siendo que dicho parámetro no existía, la idea era simplemente que ningún texto existiera sobre mi imagen.

Finalmente se logro por lo que estoy agradecido con todos.