Rotar texto + CSS

Bugger · #1 (**permalink**) 29/03/2012, 02:01

Hola,
he estado buscando el foro y he encontrado lo siguiente:
http://www.forosdelweb.com/f53/problemas-con-thead-tabla-css-824712/

todo funciona perfecto pero como dicen, en IE se corta el texto

he probado varias opciones, pero no doy con la buena...

me podrias ayudar?

gracias y saludos

#2 (**permalink**) 29/03/2012, 06:32

Buenas, en el otro post le recomiendan buscar hacks para IE, pero yo no te aconsejo eso, creo que la mejor opción es tener hojas de estilos diferentes para navegadores diferentes. Puede parecer un poco engorroso, pero la mayoría de veces no es tanto como parece.

Yo suelo hacer las hojas de estilos probándolo todo en Chrome, y normalmente cambiando los prefijos -webkit por -ms, -moz y -o consigues que las hojas funcionen en IE9 (las versiones más antiguas suelen fallar), Mozilla y Opera.

Te digo esto porque si el problema fuese poner una linea más o una menos no pasaría nada, pero no es el caso, al menos con lo que me ha dado tiempo a hacer ahora.

Tengo lo siguiente:

Código HTML:

<html>
<head>
	<style>
		th
		{
			height: 300px;
			border:1px solid red;
			text-align:center;
			vertical-align:bottom;
			position:relative;
			width:50px; /* ESTE VALOR ES "A" */
			background-color:orange;
		}

		
		.rotar 
		{
			background-color:green;
			display:block;
			white-space:nowrap;
			-webkit-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
			-webkit-transform: rotate(-90deg);
			-moz-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
			-moz-transform: rotate(-90deg);
			filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
			position:absolute;
			bottom:20px; /* ESTE VALOR SE CALCULA: A/2 -5 */
			bottom:5px\9;
			left:0;
			left:15px\9; /* ESTE VALOR SE CALCULA: A/2 -10 */
			line-height:20px;
		}
	</style>
</head>
<body>

<table><tr>
<th>NRO</th>
<th>ALUMNO</th>
<th>&nbsp;<div class="rotar">COMUNICACION 1</div></th>
<th>&nbsp;<div class="rotar">EDUCACION POR EL ARTE</div></th>
<th>&nbsp;<div class="rotar">RAZONAMIENTO LOGICO</div></th>
<th>&nbsp;<div class="rotar">HISTORIA</div></th>
<th>&nbsp;<div class="rotar">EDUCACION FISICA</div></th>
<th>&nbsp;<div class="rotar">ARTES MARCIALES</div></th>
<th>&nbsp;<div class="rotar">RELIGION</div></th>
<th>&nbsp;<div class="rotar">ALGEBRA</div></th>

</tr></table>

</body>
</html>

Los   son para que IE muestre los bordes en las celdas "sin contenido", porque al tener sus divs position:absolute, entiende que la celda está "vacía".

Las líneas con \9 las leen IE7, 8 y 9.

Te he puesto cómo se calcula algunos valores para posicionar bien el texto, pero si modificas el line-height deberás cambiarlos probando hasta que todo ajuste bien.

En Mozilla no funciona, así que insisto en lo de separar las hojas de estilos. Si en el otro post dicen que sólo falla en IE, utiliza aquel código para los demás navegadores y este (quitando lo que no sea necesario para IE), en IE. Lo puedes hacer detectando el navegador con PHP y devolviendo unas u otras hojas de estilos o con algo así:

Código HTML:

<style ..></style> <!--Hojas de estilos para los demás navegadores-->
<!--[if IE]>
<style ..></style> <!--Hojas de estilos para IE-->
<![endif]-->

Sólo ten en cuenta que en el segundo caso estarás sobrescribiendo algunas propiedades (no todas), así que tendrás que ir con más cuidado a la hora de elegir que hay que cambiar y qué no.

Espero que te sea de ayuda.

gebremswar · #3 (**permalink**) 30/03/2012, 00:34

Hola Bugger, que tal.
Aquí de dejo los condicionales que puedes usar, como bien te recomendo danihxh.

Saludos y coméntanos como te fue.

Bugger · #4 (**permalink**) 30/03/2012, 04:21

Hola de Nuevo,

antes de nada, daros la gracias por las rápidas respuestas, tanto danihxh como gebremswar!!!!

cuando vuelva la oficina para el desarrollo os cuento!!!

EDITADO

Hola de nuevo,

he separado los css por navegadores. (ya se podrían poner de acuerdo y ahorrarnos esto... pero bueno no es el caso)

me sigue pasando lo mismo, al poner la letra en vertical se me corta en el inicio de la palabra.
ahora mismo tengo lo que ha puesto danihxh en su parte de código de css y se me sigue cortando el texto.

EDITADO 2

Código HTML:

Ver original<html>
<head>
<style>
th
{
font: bold 12px Arial, Helvetica, Verdana;    
background: #d5d5d5;
padding-top: 10px;
padding-left:2px;
padding-bottom: 10px;
text-align:center;    
vertical-align:bottom; 
margin-bottom: 10px;
position:relative;
height:200px;
width:50px; /* ESTE VALOR ES "A" */
}
 
 
.rotar 
{
display:block;
white-space:nowrap;
-webkit-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
-webkit-transform: rotate(-90deg);
-moz-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position:absolute;
bottom:125px;
left:0;
text-align: left;
line-height:20px;
background: green;
}
</style>
</head>
<body>
 
<table><tr>
<th>NRO</th>
<th>ALUMNO</th>
<th>&nbsp;<div class="rotar">COMUNICACION 1</div></th>
<th>&nbsp;<div class="rotar">EDUCACION POR EL ARTE</div></th>
<th>&nbsp;<div class="rotar">RAZONAMIENTO LOGICO</div></th>
<th>&nbsp;<div class="rotar">HISTORIA</div></th>
<th>&nbsp;<div class="rotar">EDUCACION FISICA</div></th>
<th>&nbsp;<div class="rotar">ARTES MARCIALES</div></th>
<th>&nbsp;<div class="rotar">RELIGION</div></th>
<th>&nbsp;<div class="rotar">ALGEBRA</div></th>
 
</tr></table>
 
</body>
</html>

el tema está cerquita... pero no acabo de encontrar la manera de que quede bien alineado!!!

Gracias

gebremswar · #5 (**permalink**) 30/03/2012, 14:53

Bugger; modifiqué el CSS que compartiste.

Código CSS:

Ver originalth{
    font: bold 12px Arial,Helvetica,Verdana;
    height: 200px;    
    position: relative;
    vertical-align: bottom;
    width: 50px;
    padding: 10px 2px 50px 2px;
}
.rotar{
    -webkit-transform-origin:25px 10px;
    -webkit-transform: rotate(-90deg);
    -moz-transform-origin:25px 10px;
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    display: block;
    line-height: 20px;
    position: absolute;
    white-space: nowrap;
}

Y para IE, se me ocurrió lo siguiente:

Código CSS:

Ver original/*reemplazaria el "bottom" usado anteriormente*/
th{ vertical-align: top}

Esto ultimo iría en el condicional al final de las demás hojas de estilo en cascada.

Pruébelo y coméntenoslo.

#6 (**permalink**) 31/03/2012, 07:02

Creo que te falla por el bottom: 125px que has puesto. Si te fijas en el código que te pasé eran valores pequeños (5px para IE y 20px para los demás navegadores).

Prueba a copiar mi código tal cual y si te funciona ves editando sobre ese, porque yo lo probé con IETester, así que creo que será mejor que lo pruebes por ti mismo si tienes IE8.

gebremswar · #7 (**permalink**) 31/03/2012, 10:55

danihxh, en firefox no se ve bien, solo en Chrome e IE8 se aprecia correctamente lo que compartiste.

Imagen

salen superpuestas en la parte inferior.

Bugger · #8 (**permalink**) 02/04/2012, 01:43

Hola de nuevo,

con el ejemplo que me paso danihxh se ve perfecto en IE, que es lo que buscaba ya que Firefox y Chrome con lo que tengo ya se ve correctamente, pero al copiarlo directamente a mi css específico para IE pasa lo siguiente:

[URL="http://i42.tinypic.com/11hc50z.png"]http://i42.tinypic.com/11hc50z.png[/URL]

PD: aun no puedo poner links correctamente - siento si eso os da problemas.

voy a sacarme un café a ver si me da el aire porque no ser que puede estar pasando...

EDITADO:
gebremswar probé tu código y me pasa lo siguiente:

[URL="http://i40.tinypic.com/jphgli.png"]http://i40.tinypic.com/jphgli.png[/URL]

el tema esta cerca pero no consigo alinearlo correctamente.

Gracias a todos por ir siguiendo el tema!

gebremswar · #9 (**permalink**) 02/04/2012, 02:40

Bugger, el CSS especifico para IE debe ir al final de todos los demas link de CSS

por ejemplo:

Código CSS:

Ver original<head>
    <link rel="stylesheet" type="text/css" href="../css/menu.css">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <!--[if IE]><link rel="stylesheet" type="text/css" href="../css/old-browsers.css"><![endif]-->
</head>

y también no olvides limpiar la caché del navegador:

Código CSS:

Ver original/*puedes hacer "CTRL+SHIFT+SUPR" en IE, y luego marcar todos los checkbox y dar click en ELIMINAR*/

NOTA: para que tus link que compartes acá en foro se muestren corectamente, desmarca el checkbox "Convertir URLs automáticamente en enlaces" en Opciones.

Bugger · #10 (**permalink**) 02/04/2012, 02:55

Hola gebremswar,

el condicionante lo tengo así:

Código CSS:

Ver original<!--[if !IE]> -->
<link rel="stylesheet" type="text/css" href="lib/css/styles.css"/>
<!-- <![endif]-->   
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="lib/css/ie.css"/>
<![endif]-->

y la caché la tengo más que inicializada, y me sigue pasando lo mismo.

gracias por la NOTA.

Bugger · #11 (**permalink**) 02/04/2012, 04:18

Pequeño resumen de como tengo el tema,

Código HTML:

Ver original<link rel="stylesheet" type="text/css" href="lib/css/style.css"/>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="lib/css/ie.css"/>
<![endif]-->

los CSS los carga correctamente según el navegador, ya que cambia los colores y demás pero el texto vertical se me sigue cortando.

CSS Genérico

Código CSS:

Ver originalth{
    font: bold 12px Arial, Helvetica, Verdana;    
    background: #d5d5d5;
    padding-top: 10px;
    padding-left:2px;
    padding-bottom: 10px;
    text-align:center;
    height:200px;
    vertical-align:bottom; 
    margin-bottom: 10px;
}
.rotar 
{        
    display:block;
    white-space:nowrap;
    text-align: center;
    width:10px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

y el resultado es el siguiente:
http://i41.tinypic.com/oa99j5.png

en IE

Código CSS:

Ver originalth{
    height: 200px;
    border:1px solid red;
    text-align:center;
    vertical-align:bottom;
    position:relative;
    width:50px; /* ESTE VALOR ES "A" */
    background-color:orange;
}
.rotar 
{       
    background-color:green;
    display:block;
    white-space:nowrap;
    -webkit-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
    -webkit-transform: rotate(-90deg);
    -moz-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    position:absolute;
    bottom:20px; /* ESTE VALOR SE CALCULA: A/2 -5 */
    bottom:5px\9;
    left:0;
    left:15px\9; /* ESTE VALOR SE CALCULA: A/2 -10 */
    line-height:20px;
}

y el resultado es el siguiente:
http://i39.tinypic.com/kb3szp.png

se me acaban las ideas de como solucionar esto, no ser que puede estar pasando.

NOTA: Política del FORO -> 2.7 Los usuarios deben publicar al menos treinta (30) mensajes para tener la capacidad de incluir cualquier enlace (link o URL) o dirección de correo electrónico en el cuerpo de sus mensajes o en sus firmas de usuario y para poder usar el sistema de mensajes privados.
por eso me pasa lo de los Links.

Saludos

gebremswar · #12 (**permalink**) 03/04/2012, 02:35

Bugger con este codigo

Código CSS:

Ver original<html>
<head>
<style type="text/css">
th{
font: bold 12px Arial, Helvetica, Verdana;
background: #d5d5d5;
padding: 10px 20px 10px 20px;
text-align:center;
height:200px;
vertical-align:bottom;
margin: 0 0 10px 0;
}
.rotar 
{
display:block;
white-space:nowrap;
text-align: center;
width:10px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
    <!--[if IE]>
    <style type="text/css">
th
        {
            height: 300px;
            border:1px solid red;
            text-align:center;
            vertical-align:bottom;
            position:relative;
            width:50px; /* ESTE VALOR ES "A" */
            background-color:orange;
        }
 
        
        .rotar 
        {
            background-color:green;
            display:block;
            white-space:nowrap;
            -webkit-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
            -webkit-transform: rotate(-90deg);
            -moz-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
            -moz-transform: rotate(-90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            position:absolute;
            bottom:20px; /* ESTE VALOR SE CALCULA: A/2 -5 */
            bottom:5px\9;
            left:0;
            left:15px\9; /* ESTE VALOR SE CALCULA: A/2 -10 */
            line-height:20px;
        }
    </style>
    <![endif]-->
</head>
<body>
 
<table><tr>
<th>NRO</th>
<th>ALUMNO</th>
<th>&nbsp;<div class="rotar">COMUNICACION 1</div></th>
<th>&nbsp;<div class="rotar">EDUCACION POR EL ARTE</div></th>
<th>&nbsp;<div class="rotar">RAZONAMIENTO LOGICO</div></th>
<th>&nbsp;<div class="rotar">HISTORIA</div></th>
<th>&nbsp;<div class="rotar">EDUCACION FISICA</div></th>
<th>&nbsp;<div class="rotar">ARTES MARCIALES</div></th>
<th>&nbsp;<div class="rotar">RELIGION</div></th>
<th>&nbsp;<div class="rotar">ALGEBRA</div></th>
</tr></table>
</body>
</html>

Obtengo la siguiente salida:
* IE 8
* Firefox 11.0
* Chrome 18.0.1025.142 m
* Opera 11.62

Imagen

Bugger · #13 (**permalink**) 03/04/2012, 04:17

Hola de nuevo,

y como siempre agradecer los que seguís ayudándome!

he borrado la cache de IE9, he copiado tu código literalmente, en un sitio local de pruebas... y lo sigo viendo mal, es mas, no me carga el css especifico para IE, sigue saliendo los recuadros en gris y las letras cortadas...

#14 (**permalink**) 03/04/2012, 05:33

Vale, creo que ya he encontrado el problema:

Lo de la ventana 1 no creo que sea, pero por si acaso aviso que hay que aceptar los controles de ActiveX para que el texto rote.

Y en todas las otras vemos que el texto no se alinea correctamente cuando utilizamos DOCTYPE, así que toca arreglarlo para que funcione con el DOCTYPE, que creo que es lo más correcto, aunque se me olvidase ponerlo en el código que publiqué xD

EDITADO: Solución para IE9

Para IE9 sería algo así:

Código HTML:

.rotar 
{
	background-color:green;
	display:block;
	white-space:nowrap;
	-webkit-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
	-webkit-transform: rotate(-90deg);
	-moz-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
	-moz-transform: rotate(-90deg);
	-ms-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
	-ms-transform: rotate(-90deg);
	//filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	position:absolute;
	bottom:20px; /* ESTE VALOR SE CALCULA: A/2 -5 */
	//bottom:5px\9;
	left:0;
	//left:15px\9; /* ESTE VALOR SE CALCULA: A/2 -10 */
	line-height:20px;
}

He sustituido filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=3); por -ms-transform-origin:25px 10px; y -ms-transform: rotate(-90deg); y he eliminado lo de bottom:5px\9; y left:15px\9;.

EDITADO: Solución para IE8

Código HTML:

.rotar 
{
	background-color:green;
	display:block;
	white-space:nowrap;
	-webkit-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
	-webkit-transform: rotate(-90deg);
	-moz-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	position:absolute;
	bottom:5px\9;
	left:15px\9; /* ESTE VALOR SE CALCULA: A/2 -10 */
	line-height:20px;
	
	width: 280px;
	text-align:left;
	margin-bottom:260px;
}

A ver si consigo unificarlo todo un poco y sino creo que de momento, aunque sea con códigos ligeramente diferentes, funciona en todos los navegadores.

EDITADO: Solución general:

Código HTML:

<!DOCTYPE html>

<html>
<head>
	<style>		
		th
		{
			height: 300px;
			border:1px solid red;
			text-align:center;
			vertical-align:bottom;
			position:relative;
			width:50px; /* ESTE VALOR ES "A" */
			background-color:orange;
		}

		
		.rotar 
		{
			background-color:green;
			display:block;
			white-space:nowrap;
			-webkit-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
			-webkit-transform: rotate(-90deg);
			-moz-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
			-moz-transform: rotate(-90deg);
			-ms-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
			-ms-transform: rotate(-90deg);
			-o-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
			-o-transform: rotate(-90deg);
			transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
			transform: rotate(-90deg);
			position:absolute;
			bottom:20px; /* ESTE VALOR SE CALCULA: A/2 -5 */
			left:0;
			line-height:20px;
		}
		
		@-moz-document url-prefix()
		{
			.rotar 
			{
				position:relative;
				bottom:none;
				left:none;
				width:20px;
			}
		}
	</style>
	
	<!--[if lt IE 9]>
		<style>
			.rotar 
			{
				filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
				width: 280px;
				text-align:left;
				margin-bottom:260px;
				bottom:5px;
				left:15px;
			}
		</style>
	<![endif]-->
</head>
<body>

<table><tr>
<th>NRO</th>
<th>ALUMNO</th>
<th>&nbsp;<div class="rotar">COMUNICACION 1</div></th>
<th>&nbsp;<div class="rotar">EDUCACION POR EL ARTE</div></th>
<th>&nbsp;<div class="rotar">RAZONAMIENTO LOGICO</div></th>
<th>&nbsp;<div class="rotar">HISTORIA</div></th>
<th>&nbsp;<div class="rotar">EDUCACION FISICA</div></th>
<th>&nbsp;<div class="rotar">ARTES MARCIALES</div></th>
<th>&nbsp;<div class="rotar">RELIGION</div></th>
<th>&nbsp;<div class="rotar">ALGEBRA</div></th>

</tr></table>

</body>
</html>

Este último código funciona en todos los navegadores. El único "problema" que le encuentro es que en Firefox, el <div> que hay dentro de los <th> no se muestra completo, como en el caso de los otros navegadores, es decir, es más pequeño que el texto que contiene. De todos modos, como supongo que ese cuadro no debe verse, no creo que sea ningún inconveniente.

Bugger · #15 (**permalink**) 03/04/2012, 08:25

Hola danihxh,

solo tengo palabras de agradecimiento, después de un par de días dándome cabezazos con las paredes me has dado en bandeja la solución.

muchísimas gracias a los dos por ayudarme a zanjar el tema!!!!!

gebremswar · #16 (**permalink**) 03/04/2012, 18:23

IE9!!!!!!!!!!!

He ahí la clave para solucionar el problema, disculpa por no preguntarte desde un principio que versión de IE usabas.

Bueno, ya danihxh se encargó.