Foro de elhacker.net

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?

Estoy viendo páginas web con efectos similares a lo que quiero en chrome y lo veo perfectamente.

por ejemplo esta
http://www.csslab.cl/ejemplos/css3-avanzado/ejemplo1.html

que tiene el código basicamente igual

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

-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

Usa prefix-free y fijate si se resuelve n.n
Porque la sintaxis aparenta estar bien

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  :-[

Tienes 2 "#entrada li{" y deberias tener una sola  :-\

Sobre el prefix-free si, es un script javascript que se encarga de agregar los prefijos css automaticamente al servidor :)

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

Estas seguro de que estas usando la ultima version de chrome?

Version 17. La última

Sigo sin encontrar el problema  :( Nadie me sabe decir que puede ser??

PD: He probado con prefix-free y tampoco va... ni en IE ni en Chrome, solo va en mozilla
PD2: Al subirlo a internet me funciona en IE aunque no respeta el tiempo en segundos, sino que salta directamente a la nueva posición. En Chrome sigue sin hacer nada

Solucionado. He cambiado el display:inline de li por display:inline-block; y funciona perfectamente!!  ;-)

Edito: En IE sigue haciendo el tranlate de golpe sin respetar los 2s que debe de durar la animación. Para eso la única solución es esperar a IE10, no?