Ayuda con outline

[neodani]

Buenas a todos,

Estoy intentado hacer desaparecer el outline que aparece al pulsar sobre este botón, pero lo he probado de diversas maneras pero sigue apareciendo el dichoso oultine al pulsar el botón

Podéis verlo desde aquí http://neodani.com/fdw/boton1/boton1.php

Este es mi código HTML
<span class="entrar">
<input type="submit" name="entrar" value="Entrar">
</span>

Y aquí es donde he probado de todo para hacer desaparecer el outline.

Código CSS:

input,a {
   outline: 0;
}
*:focus{outline:none;}
 
.entrar {
float:left;
margin:1pt 0pt 0pt -6px;
outline: 0;
}
 
.entrar input {
background:transparent url(entrar1.png) no-repeat scroll 0pt 60%;
border:medium none;
height:29px;
width:59px;
font-weight:bold;
color:#fff;
margin-left:10px;
margin-right:10px;
margin-top:3px;
outline: 0;
cursor:pointer;
}
 
.entrar:hover input {
background:transparent url(entrar2.png) no-repeat scroll 0pt 60%;
border:medium none;
height:29px;
width:59px;
outline: 0;
cursor:pointer;
}
 

Alguno sabe cómo hacer para que no aparezca?

Muchas gracias de antemano!

[pzin]

A mi no me aparece outline alguno. En Chrome.

[alexk]

.entrar input::-moz-focus-inner{border: 0;}

[neodani]

Iniciado por alexk

.entrar input::-moz-focus-inner{border: 0;}

Muchas gracias alexk, solucionado el problema de outline.
Sin embargo cuando pulsas encima del botón es como si se moviese, en Firefox se nota menos, pero se nota que se desplaza hacia la derecha cuando pulsas el botón, y en Internet Explorer es exagerado, cuando pulsas se va para abajo el texto.

Alguno sabe como solucionar este problema? :S

Muchas gracias

[alexk]

Código:

.entrar input {
    background: url("entrar1.png") no-repeat scroll 0 60% transparent;
    border: medium none;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    height: 29px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 3px;
    padding: 0;
    width: 63px;
}

Con un reset CSS, no tendrias el problema chao

[neodani]

Iniciado por alexk

Código:

.entrar input {
    background: url("entrar1.png") no-repeat scroll 0 60% transparent;
    border: medium none;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    height: 29px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 3px;
    padding: 0;
    width: 63px;
}

Con un reset CSS, no tendrias el problema chao

En Firefox se solucionó el problema, pero si lo visitas en IE hace un efecto de pulsado que me gustaria evitar. ¿Se puede evitar como en Firefox?

http://neodani.com/fdw/boton1/boton1.php

Muchas gracias de antemano

[alexk]

Iniciado por alexk

Con un reset CSS, no tendrias el problema chao

[neodani]

Hola alexk,

Utilizo una hoja de reset pero sigue sin surtir efecto en Internet Explorer

http://neodani.com/fdw/boton1/boton1.php

La hoja que uso es la siguiente

Código CSS:

/* v1.0 | 20080212 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
 
/* remember to define focus styles! */
:focus {
    outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
.nfloat { float: none;      }
.lfloat { float: left;      }
.rfloat { float: right;     }
.clear  { clear: both;      }
.lclear { clear: left;      }
.rclear { clear: right;     }
 

Me recomiendas usar otra que sí funcione?

Muchas gracias de antemano

[neodani]

He estado haciendo numerosas pruebas, pero siempre con el mismo resultado, en internet explorer el boton se mueve al presionarlo, y creo que es así con todos los campos input's de tipo submit con imagen de fondo

<span class="entrar">
<input name="entrar" value="Entrar" type="submit">
</span>

Diría que no se puede hacer nada contra esto, es otra limitación más de IE!

Muchas gracias a todos :)