jQuery .css background-position-x change on hover not working in IE

Question

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

Answer 1

You have an inline background css style ( background:0px 0px;) on your div with id "tabs" that is overriding your background style from the following class:

.book_inner_home #tabs
{
    display : block;
    background : url(../img/tabs/home_tabs.png) no-repeat;
}

I can see this occuring when checking the css via IE developer tools.

Answer 2

Here was the issue. Real simple one, one of those where you miss literally one character from a line of code and it messes up.

Here's the fix (that I applied to each line of code)

$('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png)");

All it was, was a missing closing bracket, before "); at the end of each line which used the .css selector to set the background image. Basically the closing bracket where the url of the image is defined, was missing. The code worked fine in other browsers so I assumed there was nothing wrong with it, although I did try all sorts of other things before realising about the bracket!