Buenas.

Estoy teniendo problemas de compatibilidad con css3. Supuestamente para hacer compatibilidad con chrome tengo que usar -webkit- . Este es el código y en mozilla funciona perfectamente pero en chrome no funciona.


#entrada li{
   transition-duration:2s;
   -moz-transition-duration:2s;
   -webkit-transition-duration:2s;
   -o-transition-duration:2s;
}

#entrada li:hover{
   transform:translate(0px,-50px);
   -moz-transform:translate(0px,-50px);
   -webkit-transform:translate(0px,-50px);
   -o-transform:translate(0px,-50px);
}



Sabéis como lo puedo solucionar?

no te entiendo mucho, sera porque estoy abrumado en el skin de mi blog pero en fin...  ...

-moz- para firefox
-webkit- para chrome y navegadores basados en webkit
-o- para opera
-ms- para internet explorer(ie)

espero te sirva...saludos

idet: ya entendi xD...  pero me podrías colocar el code desde el principio pls?, creo que el problema es mas arriba...saludos

Muchas gracias por responder.

El prefix-free no se bien lo que es, he estado buscando y parece ser una solución en javascript para no tener que poner los prefijos, no? si me pudieses explicar un poco como se pone te lo agradecería muchísimo.

el código css entero es este. En mozilla hace todo perfectamente pero en crhome no funciona el transform translate:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{background: transparent;border: 0;margin: 0;padding: 0;vertical-align: baseline}
a{text-decoration:none}
.oc{display:none}


/* FUENTES PERSONALIZADAS */

@font-face{
   font-family: courRegular;
   src: url(fuentes/cour.ttf) format('truetype')}
@font-face{
   font-family: courBold;
   src: url(fuentes/courbd.ttf) format('truetype')}
   
/* ESTILOS BASICOS */

h1,h2,h3,h4,h5,h6{
   font-family:courBold;
   color: #999999;
}
p{
   font-family:courRegular;
   color: #999999;
}

/* MAQUETACION PRINCIPAL */
#menu li a{display:block;font:20px "Trebuchet MS", Arial, Helvetica, sans-serif;line-height:1.2em;color:#bbb;text-transform:uppercase;text-decoration:none;text-align:center;letter-spacing:-1px;height:70px;font-style:normal;font-weight:700}
#menu li a span{font-size:13px;line-height:1.2em;color:#666666;display:block;letter-spacing:-1px;margin-top:-3px;font-weight:normal}
#menu li a:hover, #menu .active a{color:#497e04}
#menu li a:hover span, #menu .active a span{color:#fff}
#menu #nav1 a{background:url(../img/menu1.gif) bottom center no-repeat}
#menu #nav1 a:hover, #menu #nav1.active a{background:url(../img/menu1_active.gif) bottom center no-repeat}
#menu #nav2 a{background:url(../img/menu2.gif) bottom center no-repeat}
#menu #nav2 a:hover, #menu #nav1.active a{background:url(../img/menu2_active.gif) bottom center no-repeat}
#menu #nav3 a{background:url(../img/menu3.gif) bottom center no-repeat}
#menu #nav3 a:hover, #menu #nav1.active a{background:url(../img/menu3_active.gif) bottom center no-repeat}
#menu #nav4 a{background:url(../img/menu4.gif) bottom center no-repeat}
#menu #nav4 a:hover, #menu #nav1.active a{background:url(../img/menu4_active.gif) bottom center no-repeat}

#entrada li{
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   -ms-transition: all 2s ease;
   
   transition: all 2s ease;
   /*transition-duration:2s;
   -moz-transition-duration:2s;
   -webkit-transition-duration:2s;
   -o-transition-duration:2s;*/
(ESTO ESTÁ COMENTADO PORQUE HE PROBADO CON LAS DOS FORMAS, LAS DOS FUNCIONAN BIEN EN MOZILLA, PERO EN CHROME NINGUNA)

}

#entrada li:hover {
   transform: translate(0px,-50px);
   -moz-transform: translate(0px,-50px);
   -webkit-transform: translate(0px,-50px);
   -o-transform: translate(0px,-50px);
}


nav{
   clear:both;
   margin:0 100px 0 0;
   padding-top:50px;
   padding-bottom:20px;
}

nav ul{
   display:inline;
   text-align:right;
   margin:0 50px 0 0;
   position:relative;

}


nav ul li{
   display:inline;
   text-align:right;
   margin:0 50px 0 0;
   float:right;
   
}
#entrada{
   padding-top:100px;
   text-align:center;
}
#entrada li{
   display:inline;
   margin:0 25px 0 0;
   text-align:right;
}

#logo{
   float:left;
}

body{
   margin:0;
   text-align:center;
   padding:0;
   background:url(../img/fondo.jpg) top center repeat-y #000;
}

#principal{
   text-align:left;
   margin:auto;
   width: 85%;
   height: 100%;
   background-color: rgba(0,0,0,0.6);
   position:relative;
}
   
#cajaheader{
   width: 100%;
   height: 200px;
   position: relative;
   background: black;
}
header{
   display:table;
   margin:auto;
   text-align: left;
   width:80%;
   height:200px;
   background:: black;
}

footer{
   display:table;
   margin:auto;
   text-align:center;
   padding:0px;
   width:100%;
   background: darkgray;



El código está un poco hecho al desastre porque estoy probando muchas cosas, lo tengo que intentar poner un poco mejor  

Voy a ver si consigo ponerlo. Mirando por ahí he leido que a veces hay cosas que no funcionan con archivos locales. Yo todo esto lo estoy probando sin subir a internet. Podría ser por algo de eso??

He corregido los dos #entrada li y sigue igual, de todas formas el error lo da en el translate que no lo hace


Muchas gracias por contestar

EDITO: ACABO DE PROBAR CON PREFIX-FREE Y SIGO EN LAS MISMAS, EN MOZILLA FUNCIONA PERO EN CHROME NADA. EN IE9 TAMPOCO FUNCIONA DE NINGUNA DE LAS FORMAS

Version 17. La última