[SOLUCIONADO] Estilo ¿ignorado? en IE11

jaldonza · #1 (**permalink**) 22/08/2014, 00:17

Hola:

Tengo un problema con IE 11.

Resulta que quiero poner texto alineado de forma vertical.
He probado en una ventana simple el siguiente código y me funciona perfectamente:
__________________________________________________ __
<HTML>
<HEAD>
<style>
.Rotate-90 {

-ms-transform:rotate(270deg);
}
</style>
</HEAD>

<BODY>
<div style="width:100px; height: 150px;">
<table border="1" width="100%">
<tr>
<td><div title="Texto de prueba" class="Rotate-90">Título</div></td>
</tr>
</table>
</div>
</BODY>
</HTML>
_________________________________________________

Al visualizar este código con el IE11, el resultado es el esperado.

Hasta aquí todo correcto. Peo cuando este estilo lo añado a la librería css de estilos en la aplicación en la que estoy trabajando, esto no funciona y si analizo el código del navegador con la herramienta F12, me sale la propiedad "-ms-transform:rotate(270deg)", como subrayada indicando que algo pasa, pero no me dice los que es.

Me gustaría haber añadido alguna que otra imagen pero no lo he conseguido.

¿ Por qué se muestra este estilo como subrayado por debajo ?
¿ Quién o qué me está causando el problema ?

Un Saludo y Gracias

juangemelo01 · #2 (**permalink**) 22/08/2014, 00:35

Cita:

"-ms-transform:rotate(270deg)",

¿seguro que no te falto un ;?

muestranos la parte de css que estas usando donde no se refleja para poder ayudarte mejor

jaldonza · #3 (**permalink**) 22/08/2014, 01:36

Hola:

No entiendo...

Lo del ";" no lo puse, pero en el código css realmente si que está.

Cuando me dices que os muestre la parte css que estoy usando, entiendo que te refieres al fichero css, no ? Te lo pego aquí por si te sirve de algo, aunque para que te hagas una idea, es un fichero css que es utilizado dentro de un framework de desarrollo específico(de mi empresa) en el que la inclusión de todos los estilos, scripts, metas, etc y la construcción a nivel de servidor de todas las etiquetas html que no se encuentran dentro del body se realizan de forma automática (tú solamente tienes que dejar el fichero en el directorio adecuado y el framework se encarga de utilizarlo para construir el código cuando sea necesario)

Por eso mi pregunta va enfocada a que cuando utilizo este estilo en una pagina .html simple funciona y cuando lo utilizo dentro del framework no funciona. Lo que quiero es saber como se interpreta el que con la herramienta de desarrollo del IE11 ( F12 ) salga el atributo del estilo subrayado.

No se como adjuntar imagenes en los mensajes ( en el caso de que se pueda ). Si quieres, te puedo enviar pantallazos para que tengas más detalles.

Finalmente te adjunto el código del estilo que he programado:

Cita:

/* Estilo para texto vertical */
.StlSys_TextoVertical_01 {

-ms-transform:rotate(270deg);
}

Muchas Gracias

un Saludo

webosiris · #4 (**permalink**) 22/08/2014, 02:08

cuando dices subrayado... te refieres a subrayado o a ~~tachado~~ ??
probablemente tu framework te esté incluyendo otro archivo css que te sobrescribe ese atributo.

PD: para incluir imágenes debes de usar un servicio externo como http://imgur.com

juangemelo01 · #5 (**permalink**) 22/08/2014, 02:09

Cita:

/* Estilo para texto vertical */
.StlSys_TextoVertical_01 {

-ms-transform:rotate(270deg);
}

ok, te hace falta poner

Código:

transform:rotate(270deg);

segun la pagina de microsoft, desde la version 9 de ie no necesita prefijo para reconocer las transformaciones en css

Cita:

#mytransform {
...
-ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
-webkit-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
-moz-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
}

fuente :http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx
y una tabla de compatibilidad de algunas propiedades de css3 entre navegadores

http://fmbip.com/litmus/
prueba y me avisas si quedo

jaldonza · #6 (**permalink**) 22/08/2014, 02:25

Hola:

Cunado digo subrayado, me refiero a un subrayado oondulado en color rojo que aparece debajo del atributo.

Te adjunto una imagen ( te dejo tambien el link porque parece que no funciona ) "http://i.imgur.com/lYSvlaY":

En lo de que otro css me este sobreescribiendo el atributo, no es posible porque solamentew lo utilizo una sola vez ( es la primera vez que intento poner un texto en vertival )

Gracias !

jaldonza · #7 (**permalink**) 22/08/2014, 02:30

Cita:

Iniciado por juangemelo01

ok, te hace falta poner

Código:

transform:rotate(270deg);

segun la pagina de microsoft, desde la version 9 de ie no necesita prefijo para reconocer las transformaciones en css

fuente :[url]http://msdn.microsoft.com/en-us/library/ie/jj127312%28v=vs.85%29.aspx[/url]
y una tabla de compatibilidad de algunas propiedades de css3 entre navegadores

[url]http://fmbip.com/litmus/[/url]
prueba y me avisas si quedo

Hola:

Definitivamente el problema es de mi framework. He probado las opciones que dice en el link de microsoft que me has dejado y todo funciona siempre que sea dentro de una página html simple. Si lo intento dentro del framework, deja de funcionar.

¿ Alguna idea de que significa el subrayado ondulado dentro de la herramienta de desarrollo del IE11 # F12 ?

Adjunto un link de la imegaen que he subido a imgur: "http://i.imgur.com/lYSvlaY.png"

Un Saludo y gracias !

juangemelo01 · #8 (**permalink**) 22/08/2014, 02:38

antes, limpia el cache de tus navegadores, por experiencia propia y ajena, al no limpiar el cache, no se ve reflejado directamente los cambios hechos por una saturacion del mismo, limpia el cache y me comentas

jaldonza · #9 (**permalink**) 22/08/2014, 02:48

Hola:

Ya he limpiado la cache, e incluso he cerrado el navegador y lo he vuelto a abrir.

Insisto: ¿ Alguna idea de que significa el subrayado ondulado dentro de la herramienta de desarrollo del IE11 # F12 ?

Un Saludo

juangemelo01 · #10 (**permalink**) 22/08/2014, 03:25

buscando un poco en ingles, encontre que el detalle posiblemente sea a que IE11 reconoce tu pagina como modo de "Vista compatible" desactivalo del navegador y checalo

fuente: http://blog.jonschneider.com/2014/03...orking-in.html

jaldonza · #11 (**permalink**) 22/08/2014, 06:30

Hola:

OK. Efectivamente es lo que dice el link que me has puesto.

Cuando el atributo aparece con un subrayado ondulado, significa que el navegador no reconoce el atributo. Ese era mi problema ya que mi navegador estaba funcionando en modo IE8.

He buscado en internet los atributos para colocar texto vertical en IE8 y ya funciona ( lo adjunto aqui para si a alguien le resulta util):

/

Cita:

* Estilo para texto vertical */
.StlSys_TextoVertical_01
{

/*Para que funcione con IE8*/
/*zoom: 1\9;*/
writing-mode: tb-rl\9;
filter: flipv fliph;

/*Para que funcion con IE11*/
/*-ms-transform:rotate(270deg);*/
}

Gracias por la ayuda

Un Saludo

juangemelo01 · #12 (**permalink**) 22/08/2014, 12:45

si ya quedo resuelto, pon en el titulo [SOLUCIONADO]