Volver al índiceProblemas de Amaya

En esta página se comentan algunos problemas de la edición de páginas web con Amaya. Hay que tener en cuenta que Amaya no aplica correctamente bastantes propiedades de las hojas de estilo, así que es necesario comprobar en Firefox que estamos obtenido el resultado esperado.

Faltan por poner bastantes cosas

Hojas de estilo alternativas

Amaya no maneja las hojas de estilo alternativas:

Volver al principio de la página

Alineación vertical: vertical-align

Amaya no aplica la propiedad vertical-align.

Incorrecto en Amaya 
Alineación:  sub,   bottom,  middle, text-bottom, baseline, text-top, top,    super.
Ejemplo:    bq bq bq bq  bq  bq bq bq
Incorrecto en Amaya 

Alineación:  sub,      bottom,   middle, text-bottom, baseline, text-top,   top,      super.
Ejemplo:                      

Volver al principio de la página

Espaciado de letras y palabras: letter-spacing y word-spacing

Amaya no aplica las propiedades letter-spacing y word-spacing.

Incorrecto en Amaya 
p { 
  letter-spacing: 10px; 
}

Esto es un párrafo normal y corriente.
Incorrecto en Amaya 
p { 
  word-spacing: 10px; 
}

Esto es un párrafo normal y corriente.

Volver al principio de la página

Decoración: text-decoration

Amaya no aplica el valor blink (parpadeo) a la propiedad text-decoration.

Incorrecto en Amaya 
p { 
  text-decoration: blink; 
}

Esto es un párrafo p normal y corriente.

Volver al principio de la página

Mayúsculas / minúsculas: text-transform

Amaya no aplica la propiedad text-transform.

Incorrecto en Amaya 
p { 
  text-transform: capitalize; 
}

Esto es un párrafo normal y corriente.
Incorrecto en Amaya 
p { 
  text-transform: uppercase; 
}

Esto es un párrafo normal y corriente.
Incorrecto en Amaya 
p { 
  text-transform: lowercase; 
}

Esto es un párrafo normal y corriente.

Volver al principio de la página

Sombreado: text-shadow

Amaya no aplica la propiedad text-shadow.

Incorrecto en Amaya 
p { 
   text-shadow: grey 1px -1px  
}

Esto es un párrafo con sombreado.
Incorrecto en Amaya 
p { 
   text-shadow: grey 5px -5px 2px; 
}

Esto es un párrafo con sombreado desenfocado.

Volver al principio de la página

Colores de sistema

Amaya no reconoce los colores del sistema.

Color Nombre Concepto
ActiveBorder Borde de la ventana activa
ActiveCaption Título de la ventana activa
AppWorkspace Color de fondo del interfaz de múltiplesdocumentos
Background Color de fondo del escritorio
ButtonFace Color frontal de los elementos 3D
ButtonHighlight Sombra oscura de los elementos 3D (bordes opuestos a la fuente de luz)
ButtonShadow Sombra de los elementos 3D
ButtonText Texto de los botones
CaptionText Texto en título, caja de tamaño y caja de flecha de desplazamiento
GrayText Texto en gris (desactivado). Este color es #000000 si no se puede mostrar un colo gris sólido
Highlight Elemento(s) seleccionado(s) en un control
HighlightText Texto de (de los) elemento(s) seleccionado(s) en un control
InactiveBorder Borde de la ventana inactiva
InactiveCaption Título de la ventana inactiva
InactiveCaptionText Texto de un título inactivo
InfoBackground Color de fondo de los tooltips
InfoText Texto de los tooltips
Menu Fondo de los menús
MenuText Texto de los menús
Scrollbar Área gris de la barra de desplazamiento
ThreeDDarkShadow Sombra oscura de los elementos 3D
ThreeDFace Color frontal de los elementos 3D
ThreeDHighlight Color brillante de los elementos 3D
ThreeDLightShadow Color claro de los elementos 3D (bordes frente a la fuente de luz)
ThreeDShadow Sombra oscura de los elementos 3D
Window Fondo de la ventana
WindowFrame Marco de la ventana
WindowText Texto en las ventanas

Volver al principio de la página

Espacios en blanco: white-space

Amaya no aplica la propiedad white-space.

Incorrecto en Amaya 
pre { 
  white-space: normal; 
}
 
<pre>white-space: normal
        Espacios en blanco seguidos: (     ).
        Tercera línea.</pre>
 
white-space: normal 
     Espacios en blanco seguidos: ( ).
     Tercera línea.
Incorrecto en Amaya 
pre { 
  white-space: pre; 
}
 
<pre>white-space: pre
         Espacios en blanco seguidos: (     ).
         Tercera línea.</pre>
 
white-space: pre
        Espacios en blanco seguidos: (     ).
        Tercera línea.
Incorrecto en Amaya 
pre { 
  white-space: nowrap; 
}
 
<pre>white-space: nowrap
         Espacios en blanco seguidos: (     ).
         Tercera línea.</pre>
 
white-space: nowrap
        Espacios en blanco seguidos: ( ).
        Tercera línea.

Volver al principio de la página

Pseudo-clases y pseudo elementos

Pseudo-clase :hover

Amaya no reconoce la pseudo-clase :hover.

Incorrecto en Amaya 
p { 
  background-color: white; 
  color: black; 
}
a:hover { 
  background-color: black; 
  color: white; 
}

Este párrafo está escrito en negro sobre blanco, pero cuando se pasa el ratón por encima de este enlace, el enlace se muestra de color blanco sobre fondo negro.
Incorrecto en Amaya 
p { 
  background-color: white; 
  color: black; 
}
p:hover { 
  background-color: black; 
  color: white; 
}

Este párrafo está escrito en negro sobre blanco, pero cuando se pasa el ratón por encima del párrafo, se muestra de color blanco sobre fondo negro.

Volver al principio de la página

Pseudo-clase :hover

Amaya no reconoce la pseudo-clase :active.

Incorrecto en Amaya 
p { 
  background-color: white; 
  color: black; 
}
a:active { 
  background-color: black; 
  color: white; 
}

Este párrafo está escrito en negro sobre blanco, pero cuando se hace clic en este enlace, el enlace se muestra de color blanco sobre fondo negro.
Incorrecto en Amaya 
p { 
  background-color: white; 
  color: black; 
}
p:active { 
  background-color: black; 
  color: white; 
}

Este párrafo está escrito en negro sobre blanco, pero cuando se hace clic en él, se muestra de color blanco sobre fondo negro.

Volver al principio de la página

Pseudo-clase :focus

Amaya no reconoce la pseudo-clase :focus.

Incorrecto en Amaya 
input:focus { 
  border: red 2px dotted; 
  padding: 2px; 
}

Volver al principio de la página

Pseudo-elementow :first-line y :first-letter

Amaya no reconoce el pseudo-elemento :first-line.

Incorrecto en Amaya 
p:first-line { 
  text-transform: uppercase; 
}

La primera línea de este párrafo se tiene que ver en mayúsculas. Modifica el tamaño de la fuente o el tamaño de la ventana para ver cómo se modifica el aspecto del párrafo.

Amaya no reconoce el pseudo-elemento :first-letter.

Incorrecto en Amaya 
p:first-letter { 
  color: red; 
}

La primera letra de este párrafo se tiene que ver en rojo.

Y la primera de éste también.
Incorrecto en Amaya 
p:first-letter { 
  color: red; 
  float: left; 
  font-family: monospace; 
  font-size: 300%; 
}

La primera letra de este párrafo es una letra capital, es decir, una letra más grande que ocupa varias líneas de texto. Para ello, en la hoja de estilo tienes que hacer la letra flotante y aumentar su tamaño. En este caso también he cambiado el color y el tipo de letra.

Volver al principio de la página

Generar contadores: content, counter-increment y counter-reset

Amaya no aplica las propiedades content, counter-increment y counter-reset.

Incorrecto en Amaya 
pre { 
  counter-reset: cuenta-parrafos; 
}

p:before { 
  content: counter(cuenta-parrafos);
  counter-increment: cuenta-parrafos; 
}

        

      		
      
Ejemplo de contadores


        
Este párrafo es un párrafo sin clase.


        
Este párrafo es un párrafo sin clase.


        
Este párrafo es un párrafo sin clase.

        
Ejemplo de contadores


        
Este párrafo es un párrafo sin clase.


        
Este párrafo es un párrafo sin clase.

      		
    

  





  
    

      Incorrecto en Amaya
      
pre { 
  counter-reset: cuenta-parrafos; 
}

p:before { 
  content: counter(cuenta-parrafos)". ";
  counter-increment: cuenta-parrafos; 
}

      		
      
Ejemplo de contadores


        
Este párrafo es un párrafo normal y corriente.


        
Este párrafo es un párrafo normal y corriente.


        
Este párrafo es un párrafo normal y corriente.

        
Ejemplo de contadores


        
Este párrafo es un párrafo normal y corriente.


        
Este párrafo es un párrafo normal y corriente.

      		
    

  




Volver al principio de la página





Fondos



background y background-color



Al poner una propiedad background después de
una background-color debería anularse la
propiedad background-color, pero Amaya no lo
hace.




  
    

      Incorrecto en Amaya
      
td { 
  background-color: orange;
  background: url("gota.png"); 
}

      		
      Esta
        celda tiene color de fondo orange y la misma imagen con transparencia
        del ejemplo anterior, pero el color de fondo no es visible porque la
        imagen de fondo está establecida posteriormente con background en vez
        de background-image.Incorrecto en Amaya
    

    

      Incorrecto en Amaya
      
td { 
  background: url("gota.png");
  background-color: orange;
}

      		
      Esta
        celda tiene color de fondo orange y la misma imagen con transparencia
        del ejemplo anterior, pero el color de fondo sí es visible
        porquebackground-color está establecido posteriormente.
    

  




Volver al principio de la página





Mezclar números y palabras en background-position



Amaya muestra la imagen de fondo abajo a la derecha, lo que es incorrecto
puesto que la propiedad background-position del
ejemplo no es válida.




  
    

      Incorrecto en Amaya 
      
td { 
  background-image: url("verde.jpg");
  background-position: bottom 100%; 
  /* bottom 100% es incorrecto, lo correcto 
     sería decir 100% bottom (primero la posición 
     horizontal y luego la vertical) 
  */
  background-repeat: no-repeat;
}

      		
      
    

  




Volver al principio de la página





Tamaño



Atributo height en porcentaje



Amaya aplica porcentajes en la propiedad height.




  
    

      Incorrecto en Amaya
      
p { 
  border: black 1px solid;
  height: 50%; /* Ni FF ni IE hacen caso de esta propiedad */
}

      		
      
Hola,
        mundo

      		
    

  







  Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo
  CSS" disponible en http://www.mclibre.org

  Autor: Bartolomé Sintes Marco

  Última modificación: 30 de noviembre de 2009 




Creative Commons License 

Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.