Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/09/2012, 16:16
Avatar de pierxo
pierxo
 
Fecha de Ingreso: septiembre-2012
Mensajes: 20
Antigüedad: 11 años, 7 meses
Puntos: 0
Incompatibilidad con IE :S

Hola a todos tengo un codigo css de pestañas y me funcione en todos los navegadores menos en IE me gustaria saber si alguien podria ayudarme para hacerlo funcionar.

El codigo en el siguiente:

@charset "utf-8";
/* CSS Document */
.tabs { /* es el rectángulo contenedor */
margin: 0 auto;
height: 1250px;
position: relative;
width: 900px;
margin-left:40px;
}

.tab { /* cada una de las pestañas */
float: left;
}
.colorLabel { /* la parte superior con el título de la pestaña */
background-color: #fff;
border-radius: 5px 5px 0 0;
box-shadow: -3px 3px 2px #AAB3AF inset;
color: #DDD;
cursor: pointer;
left: 0;
margin-right: 1px;
padding: 5px 15px;
position: relative;
text-shadow: 1px 1px #000;

}
/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
.tab [type=radio1] { display: none; }

/* el contenido de las pestañas */
.content {
background-color: #AAB3AF;
bottom: 0;
left: 0;
overflow: hidden;
padding: 20px;
position: absolute;
right: 0;
top: 29px;
border-radius: 5px 5px 5px 5px;
}
[type="radio"]:checked ~ label {
background-color: #AAB3AF;
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
font-size: 15px;
line-height: 40px;
height: auto;
position: relative;
padding: 0 50px;
float: left;
display: block;
width: auto;
color: #385c5b;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
[type=radio]:checked ~ label ~ .content { z-index: 1; }
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
}