H1 image replacement shows up in every browser except ie?

Question

I've managed to get my header to work as a link in ff, safari and opera with the css image replacement

#header h1 {
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    text-indent: -9999px;
    margin-left: 15px;
}
#header h1 a {
    display: block;
    height: 120px;
    width: 400px;
    margin-top: -135px;
}

I'm trying to optimize the site its for in IE, my last step before I launch it on monday but the logo doesn't appear at all in IE 8 or 9, But it very surprisingly does in IE 7. I managed to get the logo to appear in IE9 by making the display inline-block

.ie9 #header h1 {
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    text-indent: -9999px;
    margin-left: 15px;
}

.ie9 #header h1 a {
    display: inline-block;
    height: 120px;
    width: 400px;
    margin-top: -135px;
}

bit the image is no longer a link when I do this, does anyone have any idea how to fix this? I would put the image in the HTML instead of using the image replacement but Its been hammered into my head that from an SEO standpoint using the image replacement is better.

Answer 1

I think it is the margin-top: -135px causing the problem. The height is only 120px so it will end up being -15px (height - margin) so disappearing underneath the bottom of the H1 tag.