Foros del Web » Creando para Internet » CSS »

Ayuda con outline

Estas en el tema de Ayuda con outline en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/12/2010, 16:34
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Ayuda con outline

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:
Ver original
  1. input,a {
  2.    outline: 0;
  3. }
  4. *:focus{outline:none;}
  5.  
  6. .entrar {
  7. float:left;
  8. margin:1pt 0pt 0pt -6px;
  9. outline: 0;
  10. }
  11.  
  12. .entrar input {
  13. background:transparent url(entrar1.png) no-repeat scroll 0pt 60%;
  14. border:medium none;
  15. height:29px;
  16. width:59px;
  17. font-weight:bold;
  18. color:#fff;
  19. margin-left:10px;
  20. margin-right:10px;
  21. margin-top:3px;
  22. outline: 0;
  23. cursor:pointer;
  24. }
  25.  
  26. .entrar:hover input {
  27. background:transparent url(entrar2.png) no-repeat scroll 0pt 60%;
  28. border:medium none;
  29. height:29px;
  30. width:59px;
  31. outline: 0;
  32. cursor:pointer;
  33. }

Alguno sabe cómo hacer para que no aparezca?

Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 12/12/2010, 16:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Respuesta: Ayuda con outline

A mi no me aparece outline alguno. En Chrome.
  #3 (permalink)  
Antiguo 12/12/2010, 16:43
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Ayuda con outline

.entrar input::-moz-focus-inner{border: 0;}
  #4 (permalink)  
Antiguo 12/12/2010, 17:32
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con outline

Cita:
Iniciado por alexk Ver Mensaje
.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
  #5 (permalink)  
Antiguo 12/12/2010, 19:18
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Ayuda con outline

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
  #6 (permalink)  
Antiguo 13/12/2010, 01:23
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con outline

Cita:
Iniciado por alexk Ver Mensaje
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
  #7 (permalink)  
Antiguo 13/12/2010, 08:39
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Ayuda con outline

Cita:
Iniciado por alexk Ver Mensaje
Con un reset CSS, no tendrias el problema chao
  #8 (permalink)  
Antiguo 13/12/2010, 12:15
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con outline

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:
Ver original
  1. /* v1.0 | 20080212 */
  2.  
  3. html, body, div, span, applet, object, iframe,
  4. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  5. a, abbr, acronym, address, big, cite, code,
  6. del, dfn, em, font, img, ins, kbd, q, s, samp,
  7. small, strike, strong, sub, sup, tt, var,
  8. b, u, i, center,
  9. dl, dt, dd, ol, ul, li,
  10. fieldset, form, label, legend,
  11. table, caption, tbody, tfoot, thead, tr, th, td {
  12.     margin: 0;
  13.     padding: 0;
  14.     border: 0;
  15.     outline: 0;
  16.     font-size: 100%;
  17.     vertical-align: baseline;
  18.     background: transparent;
  19.    
  20. }
  21. body {
  22.     line-height: 1;
  23. }
  24. ol, ul {
  25.     list-style: none;
  26. }
  27. blockquote, q {
  28.     quotes: none;
  29. }
  30. blockquote:before, blockquote:after,
  31. q:before, q:after {
  32.     content: '';
  33.     content: none;
  34. }
  35.  
  36. /* remember to define focus styles! */
  37. :focus {
  38.     outline: 0;
  39. }
  40.  
  41. /* remember to highlight inserts somehow! */
  42. ins {
  43.     text-decoration: none;
  44. }
  45. del {
  46.     text-decoration: line-through;
  47. }
  48.  
  49. /* tables still need 'cellspacing="0"' in the markup */
  50. table {
  51.     border-collapse: collapse;
  52.     border-spacing: 0;
  53. }
  54.  
  55. .nfloat { float: none;      }
  56. .lfloat { float: left;      }
  57. .rfloat { float: right;     }
  58. .clear  { clear: both;      }
  59. .lclear { clear: left;      }
  60. .rclear { clear: right;     }

Me recomiendas usar otra que sí funcione?

Muchas gracias de antemano
  #9 (permalink)  
Antiguo 14/12/2010, 01:10
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con outline

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 :)

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:15.