duda con compatibilidades

[Doch]

Hola buenas, tengo el siguiente código en javascript

Código Javascript:

function close_alert(id) {
    
    var alert_div = document.getElementById('alert_container_'+id+'');
    var cookie_name = "YRO_alert_id_" + id;
    $(alert_div).fadeOut(400);
    
    document.cookie = ""+cookie_name+"="+ id +"; expires=Thu, 1 Dec 2015 12:00:00 GMT";
 
}
 

y este en HTML

Código HTML:

<div id =\"alert_container_$alert_id\"  style=\"overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: 0px 0px 0px 1px #5A5D63;-webkit-box-shadow: 0px 0px 0px 1px #5A5D63;border: 1px solid #000;\">
    <table class=\"alert alert-".$alert_class."\">
        <tr>
            <td class =\"alert_text\" >
                    ".$alert_text."
                </td> 
                <td>
                <button style=\"float:right; outline:0; margin-right:8px;\" class=\"btn btn-$alert_class\">
                    <a href=\"#\" onclick=\"close_alert($alert_id)\" title=\"".$LNG['alert_close']."\">
                        <i class=\"icon-remove icon-white\"></i>
                    </a>
                </button>
                </td>
        </tr>
    </table>
</div>
 

Bueno la funcion principal es que si se clica el boton, el div se esconde con un efecto de fadeOut y se añade la cookie para que este no se muestre otra vez.

la cosa es que en chrome va perfectamente, pero en mozilla e internet explorer el boton no hace nada.. Alguna idea? es este el mejor metodo para este "sistema de alertas"?

PD: no os preocupeis por el CSS del style.