Greetings everyone, I am currently facing some compatibility issues with my style sheets, particularly in IE 8.
The CSS code below functions perfectly in my Chrome/Firefox style sheet, but unfortunately, it does not have any effect on 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 Internet Explorer, the code looks like this:
#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}
When working in IE, I can only apply the background image, but the desired hover effect as shown above doesn't work at all in IE8. Here 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 unique ID assigned to each 'a' tag allows me to specifically target and style each anchor according to its background and effects. Can someone please assist me in resolving this issue related to IE?
UPDATE:
The text appears indented off the page, which obscures the content between the anchor tags. This indicates that the button consists solely of a background image. To provide clarity, I have included the CSS used to style the anchor tag below:
.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;
}