Ver Mensaje Individual
  #11 (permalink)  
Antiguo 02/04/2012, 04:18
Bugger
 
Fecha de Ingreso: septiembre-2010
Ubicación: /home/
Mensajes: 103
Antigüedad: 14 años, 2 meses
Puntos: 17
Respuesta: Rotar texto + CSS

Pequeño resumen de como tengo el tema,

Código HTML:
Ver original
  1. <link rel="stylesheet" type="text/css" href="lib/css/style.css"/>
  2. <!--[if IE]>
  3. <link rel="stylesheet" type="text/css" href="lib/css/ie.css"/>
  4. <![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 original
  1. th{
  2.     font: bold 12px Arial, Helvetica, Verdana;    
  3.     background: #d5d5d5;
  4.     padding-top: 10px;
  5.     padding-left:2px;
  6.     padding-bottom: 10px;
  7.     text-align:center;
  8.     height:200px;
  9.     vertical-align:bottom;
  10.     margin-bottom: 10px;
  11. }
  12. .rotar
  13. {        
  14.     display:block;
  15.     white-space:nowrap;
  16.     text-align: center;
  17.     width:10px;
  18.     -webkit-transform: rotate(-90deg);
  19.     -moz-transform: rotate(-90deg);
  20.     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  21. }
y el resultado es el siguiente:
http://i41.tinypic.com/oa99j5.png

en IE
Código CSS:
Ver original
  1. th{
  2.     height: 200px;
  3.     border:1px solid red;
  4.     text-align:center;
  5.     vertical-align:bottom;
  6.     position:relative;
  7.     width:50px; /* ESTE VALOR ES "A" */
  8.     background-color:orange;
  9. }
  10. .rotar
  11. {      
  12.     background-color:green;
  13.     display:block;
  14.     white-space:nowrap;
  15.     -webkit-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
  16.     -webkit-transform: rotate(-90deg);
  17.     -moz-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
  18.     -moz-transform: rotate(-90deg);
  19.     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  20.     position:absolute;
  21.     bottom:20px; /* ESTE VALOR SE CALCULA: A/2 -5 */
  22.     bottom:5px\9;
  23.     left:0;
  24.     left:15px\9; /* ESTE VALOR SE CALCULA: A/2 -10 */
  25.     line-height:20px;
  26. }

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