Need some help fixing a css issue in IE8?

Hi guys I am having some cross browser issues with my style sheets namely ie 8.

The css below works fine in my chrome/ff style sheet but it does not work at all for my ie stylesheet.

#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}
a#threetwoBTN:hover {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG02.png');
}

In IE, below is as far as I can get.

#thre开发者_开发问答etwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}

I can apply my background image and thats about it, the hover effect I want that works above does not work at all IE8. Below is the structure of my tags:

    <div class="ContentBody">
    <div class="LeftContentBody">
        <br/>
            <!-- another div but ignored for example! -->
        <br />
        <a id="threetwoBTN">Download 32-Bit</a>
        <p>
            * ...
        </p>

The id set to each 'a' tag allows me target and style each anchor the way want it to look as each tag has different backgrounds and effects and etc. Can someone please help me explain this IE related issue?

UPDATE:

The text is indented off the page, so the user doesn't see the text between the anchor tags. This means the button is made up of a background image that's all. For clarity I have pasted in below the css I am using to style the anchor tag.

.LeftContentBody a {
font-size: 10px;
text-indent: -1500px;
width: 124px;
height: 62px;
border: 2px solid #000000;
margin-left: 32px;
margin-bottom: 32px;
float: left;
clear: left;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

You should add the attribute href to your tag , try with #, it should work with that, at least it does for me.

Hope it helps.

#threetwoBTN 
{ 
    background: #CCC;     
} 
#threetwoBTN:hover {
    background: #AAA;
}

<div class="ContentBody">     
<div class="LeftContentBody">         
    <br/>            
     <!-- another div but ignored for example! -->         
    <br />        
    <a href="#" id="threetwoBTN">Download 32-Bit</a>         
    <p>* ...</p> 
</div>
</div>

Is this an image positioned next to the text, or is it to replace the text?

If it is meant to replace the text, have you given this a width/height and display block?