List (not LI element) style with delete button broken in IE

Question

I have a style I like and as usual it looks good in Firefox 18 but on the version of IE 9 (i know its not fully up to date) it looks horrible (and broken).

So I decided to give up on the style and try and find an example that works online. However I'm finding it impossible to find something similar not to mention compatible with IE!

Does anyone here know how to fix my example and maybe make it more backwards compatible OR does anyone know any examples of this kind of style I can get some pointers from?

HTML

<div class="DateStyle"><span class="DateStyle_Date">21/01/2013</span><span class="DateStyle_Cross">x</span></div>

<div class="DateStyle"><span class="DateStyle_Date">11/02/2012</span><span class="DateStyle_Cross">x</span></div>

<div class="DateStyle"><span class="DateStyle_Date">08/05/2012</span><span class="DateStyle_Cross">x</span></div>

CSS

.DateStyle {
    display: inline-block;
    background-color: #4A4F54;
    color: #A4A7AA;
    font-weight: bolder;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 2px 6px 2px 8px;
    line-height: 1.2em;
}
.DateStyle_Date {
    padding-right: 5px;
    border-right: #A4A7AA dashed 1px;
}
.DateStyle_Cross{
    padding-left: 4px;
    height: 15px;
}

.DateStyle:hover {
    background-color: #5C6165;
}

JQuery

$(document).ready(function() {
    $('.DateStyle_Cross').hover(function(){
        $(this).parent().css('background','#751919 ');
    }, function(){
        $(this).parent().css('background','#4A4F54');
    })
    $('.DateStyle').hover.css( 'cursor', 'crosshair' );
    $('.DateStyle_Cross').hover.css( 'cursor', 'crosshair' );
});

http://jsfiddle.net/pUb6q/

Thanks