Floating div IE fix

I know this is probably something I should know by now. I have a placed a floating div with a background image in the header.php file which I can position nicely for most browsers. In Ie 6,7,8 & 9 the div pushes everything down. I believe it has something to do with heights not being parsed by ie? can some one please help?

.cardy {
    background-image: url("http://mrsbrownsboys.com.au/wp-content/uploads/2013/03/cardy.gif");
    background-position: right top;
    background-repeat: no-repeat;
    float: right;
    height: 308px;
    position: relative;
    right: -2px;
    top: 163px;
    width: 494px;
	z-index:400;