jQuery.css() for IE Only styling.

Question

I'm using jQuery to position elements in a submenu. The html looks like:

<div class="menu">
    <div>
        <a>Menu Option</a>
        <div class="submenu">
            <div><a>Submenu Option</a></div>
        </div>
    </div>
</div>

menu has position: relative, submenu has position: absolute. IE8 and FF are rendering the submenu directly below the menu and left aligned. IE7 is placing the submenu inline with the menu, directly after its sibling a. In our css, we're using "*margin-top: 40px" to move the menu to the correct spot vertically.

In our javascript, we're using jquery to align the submenu correctly horizontally. In FF and IE8, this can be done through: $(this).css("margin-left", $(this).parent().position().left - 1); In IE7 $(this).css("margin-left", -1 * ($(this).siblings('a').width() + 51)); will correctly align the menu (the 51 is for padding and "this" is referring to the div.submenu in both cases.)

I tried changing the 2nd statement to change the css for "*margin-left" instead of "margin-left" but that doesn't seem to work. How can I tell jquery to use 2nd line for IE7, and the 1st line for all other browsers?

Resolution:

I tried this first since jquery's .browser method is deprecated. This did not work.

<!-- [if IE 7]>
<script type="text/javascript">
    $(function () {
        $(".submenu").each(function () {
            $(this).css("margin-left", -1 * ($(this).siblings('a').width() + 51));
    });
});
</script>
<![endif]-->

Tried again using $.browser and this works successfully. I couldn't find anything relevant to test against using $.support.

Answer 1

You cannot use CSS-hacks like the *-character in JavaScript. Try to use jQuery's $.browser-object to detect browser and version. For your specific case, that would be:

if ($.browser.msie && $.browser.version < 8) {
    // IE 7 or older
    $(this).css("margin-left", -1 * ($(this).siblings('a').width() + 51));
} else {
    // all other browsers
    $(this).css("margin-left", $(this).parent().position().left - 1);
}

Answer 2

use conditional comments

<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->

read http://www.quirksmode.org/css/condcom.html

Answer 3

You could use jQuery.browser to check for IE. Although it's not recommended by the jQuery team to use this function. Whenever possible use feature detection.