I'm experiencing an issue where the desired effect is working in Firefox but not in Internet Explorer 8.
Here is the webpage:
Please check the top 3 links in the header (right side) that should have spotlights fading in and out when hovering over them.
The fade effect seems to be working, but the graphic appears distorted. It is a transparent png image.
Below is the JQuery code:
$(document).ready(function() {
$(".B1").hover(
function() {
$(this).stop(true, true).fadeTo(500, 1.00);
},
function() {
$(this).stop(true, true).fadeTo(500, 0.00);
}
);
$(".B2").hover(
function() {
$(this).stop(true, true).fadeTo(500, 1.00);
},
function() {
$(this).stop(true, true).fadeTo(500, 0.00);
}
);
$(".B3").hover(
function() {
$(this).stop(true, true).fadeTo(500, 1.00);
},
function() {
$(this).stop(true, true).fadeTo(500, 0.00);
}
);
});
Here is the CSS styling:
.B1, .B2, .B3 {
background: Transparent url(App_Themes/BlueGrey/Images/YearEndShow/Buttons-light-and-shadow.png) no-repeat;
opacity: 0.0;
filter: alpha(opacity = 0);
}
And here is the HTML structure:
<table style="width:600px; position:relative; top:-2px;">
<tr>
<td style="background:url(App_Themes/BlueGrey/Images/YearEndShow/buttons-yearendshow-info.png) no-repeat;"><div style="width:200px; height:120px; display:block;" class="B3"><a href="YearEndShow.aspx" style="width:200px; height:120px; display:block;"></a></div></td>
<td style="background:url(App_Themes/BlueGrey/Images/YearEndShow/buttons-Artist-Info.png) no-repeat;"><div style="width:200px; height:120px; display:block;" class="B2"><a href="YearEndShowArtists.aspx" style="width:200px; height:120px; display:block;"></a></div></td>
<td style="background:url(App_Themes/BlueGrey/Images/YearEndShow/buttons-Event-Info.png) no-repeat;"><div style="width:200px; height:120px; display:block;" class="B1"><a href="YearEndShowInfo.aspx" style="width:200px; height:120px; display:block;"></a></div></td>
</tr>
</table>
Any insights on why the graphic displays strangely?
Thank you!