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