Incompatibilidad con IE :S

[pierxo]

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);
}

[moro666]

Me da palo probar el codigo, podrias decir que parte es la que falla o poner la pagina aqui??

[pierxo]

Este es el html:
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Primera</label>
<div class="content"> el contenido de la pestaña 1 </div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Segunda</label>
<div class="content"> el contenido de la pestaña 2 </div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tercera</label>
<div class="content"> el contenido de la pestaña 3 </div>
</div>
</div>

aqui te dejo el css adecuado:

<style>

.tabs { /* es el rectángulo contenedor */
margin: 0 auto;
min-height: 200px;
position: relative;
width: 550px;
}
.tab { /* cada una de las pestañas */
float: left;
}
.tab label { /* la parte superior con el título de la pestaña */
background-color: #456;
border-radius: 5px 5px 0 0;
box-shadow: -3px 3px 2px #678 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=radio] { display: none; }

/* el contenido de las pestañas */
.content {
background-color: #678;
bottom: 0;
left: 0;
overflow: hidden;
padding: 20px;
position: absolute;
right: 0;
top: 23px;
}
/* y un poco de animación */
.content > * {
opacity: 0;

-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);

-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}

/* controlamos la pestaña activa */
[type="radio"]:checked ~ label {
background-color: #678;
box-shadow: 0 3px 2px #89A inset;
color: #FFF;
z-index: 2;
}
[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);
}

</style>

y lo que creo que no reconoce es

[type="radio"]:checked ~ label {
background-color: #678;
box-shadow: 0 3px 2px #89A inset;
color: #FFF;
z-index: 2;
}

[moro666]

Juer, pruba cambiar el <html> por esto

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 

Pero los selectores de atributo no son compatibles con IE, almenos la gran mayoria.
Yo te recomendaria un css mas simple, sin nada de selectores, y algo de js para las pestañas.

Si no te va al cambiar el <html> y no sabes como hacerlo en js, comentamelo y te ayudo con el js!

[moro666]

Y puede que este link sea de tu interes! yo personalmente paso de hacer mis paginas compatibles con IE, que se haga IE compatible conmigo!

http://www.debelop.com/blog/css-espe...rnet-explorer/

[pzin]

Iniciado por moro666

Pero los selectores de atributo no son compatibles con IE, almenos la gran mayoria.

http://kimblim.dk/css-tests/selectors/

[moro666]

Iniciado por Bonez

http://kimblim.dk/css-tests/selectors/

Si, pero piensa en que no todo el mundo va a tener el IE actualizao a la 9, y aun y asi para que funcionen en IE hay que añadir lo de doctipe en el <html>

[pierxo]

Gracias a todos por la ayuda. Ya pude solucionar el problema utilice pie.htc :D http://css3pie.com/demos/tabs/#