jQuery Forum

So, I have a website with tabs along the top, and the tabs change on hover to appear to "pop up". To achieve this I've used a CSS sprite for the tabs and change the background position on hover using jQuery to the appropriate y position on the sprite.

HTML:

<div id="tabs">
	<div id="tabs_bg" class="pngfix"></div>
	<a id="tabs_home" href="<?php echo $base; ?>/" style="width:67px;height:23px;top:17px;"></a>
	<a id="tabs_mission" href="<?php echo $base; ?>/mission/" style="width:73px;height:23px;top:17px;left:150px;"></a>
	<a id="tabs_style" href="<?php echo $base; ?>/style/" style="width:60px;height:23px;top:17px;left:226px;"></a>
	<a id="tabs_personality" href="<?php echo $base; ?>/personality/" style="width:108px;height:26px;top:14px;left:286px;"></a>
	<a id="tabs_projects" href="<?php echo $base; ?>/projects/" style="width:70px;height:26px;top:14px;left:396px;"></a>
	<a id="tabs_blog" href="/blog/" style="width:60px;height:36px;top:4px;left:466px;"></a>
	<a id="tabs_contact" href="<?php echo $base; ?>/contact/" style="width:73px;height:26px;top:14px;left:526px;"></a>
</div>

jQuery:

<script>
<!--MISSION TAB HOVER FUNCTION-->
$("#tabs_mission").hover(
  function () {
	$('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px -46px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px 0px");
  }  
);

<!--HOME TAB HOVER FUNCTION-->
$("#tabs_home").hover(
  function () {
	$('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px -92px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px 0px");
  }  
);

<!--PERSONALITY TAB HOVER FUNCTION-->
$("#tabs_personality").hover(
  function () {
	$('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px -138px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px 0px");
  }  
);

<!--PROJECTS TAB HOVER FUNCTION-->
$("#tabs_projects").hover(
  function () {
	$('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px -184px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px 0px");
  }  
);

<!--BLOG TAB HOVER FUNCTION-->
$("#tabs_blog").hover(
  function () {
	$('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px -230px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px 0px");
  }  
);

<!--CONTACT TAB HOVER FUNCTION-->
$("#tabs_contact").hover(
  function () {
	$('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px -276px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
	$('#tabs').css("background-position", "0px 0px");
  }  
);
</script>

This all works perfectly in all browsers except IE. I've tested it in all versions of IE and it works in none. When you hover over any tab in IE, the tabs simply disappear, as if the background image has been removed.

This is the site I'm implementing this on - http://www.thatsbrave.co.uk

Thanks