Hoola a todos/as:
Estoy adaptando mi Website a IE8 y en la barra de menús no consigo que la pseudo clase active funcione. Si funciona hover.
He estado mirando y aparentemente IE8 la soporta pero no me va el código. Como no soy muy experto en clases CSS, seguro que tengo algo mal escrito ¿Alguien me podría indicar el fallo?
Código:
/*Estilos de los botones de menú*/
#menu {position:relative;clear:both;left:50%; margin-left:-446px; padding-top:5px;width:892px;height:32px;}
#izquierda {height: 32px;width:3px;background-image:url(/img/b_izquierda.gif); background-repeat:no-repeat; position:relative;float:left;}
#centro {height: 24px; padding-top:4px; padding-left: 13px; padding-right: 14px; width:auto;background-image:url(/img/b_centro.gif) ;position:relative;float:left;}
#centro a {height: 32px;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#050505}
#derecha {height: 32px;width:3px;background-image:url(/img/b_derecha.gif); background-repeat:no-repeat; position:relative;float:left;margin-right:4px;}
/*Estilos de los botones de menú hover*/
.desp_menu:hover #izquierda{
top: -3px; height: 34px;width:3px;padding-right:2px;background-image:url(/img/b_izquierda_hover.gif); background-repeat:no-repeat;
background-image:url(/img/b_izquierda_hover.gif);
}
.desp_menu:hover #centro a {height: 34px; text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#050505;vertical-align: -7px;}
.desp_menu:hover #centro{
top: -3px; height: 34px;padding-top: 0px; padding-left: 11px; padding-right: 11px; width:auto;background-image:url(/img/b_centro_hover.gif);
background-image:url(/img/b_centro_hover.gif);
}
.desp_menu:hover #derecha{
top: -3px; height: 34px;padding-left: 2px;width:3px;background-image:url(/img/b_derecha_hover.gif); background-repeat:no-repeat; position:relative;float:left;
background-image:url(/img/b_derecha_hover.gif);
}
/*Estilos de los botones de menú Active*/
.desp_menu:active #izquierda{
top: -3px; height: 34px;width:3px;padding-right:2px;background-image:url(/img/b_izquierda_fixed.gif); background-repeat:no-repeat;
}
.desp_menu:active #centro a {height: 34px; text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#050505;vertical-align: -7px;}
.desp_menu:active #centro{
top: -3px; height: 34px;padding-top: 0px; padding-left: 11px; padding-right: 11px; width:auto;background-image:url(/img/b_centro_fixed.gif);
}
.desp_menu:active #derecha{
top: -3px; height: 34px;padding-left: 2px;width:3px;background-image:url(/img/b_derecha_fixed.gif); background-repeat:no-repeat; position:relative;float:left;
}
Pongo el código completo por que lo demás va bien y así sirve como aporte si lo consigo resolver.
Muchas gracias a todos,