current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm running Drupal, and have enabled "Aggregate and compress CSS files" as well as "Aggregate JavaScript files". I am using the following jQuery to add a class to one of the elements, which works perfectly.

However, when I enable "Aggregate and compress CSS files", the desired result does not happen in IE7 and IE8. It works fine in Firefox, Safari and Chrome.

Drupal dynamically generates the compressed CSS and places it in a new directory.

Here is my jQuery: 

(function ($, Drupal, window, document, undefined) {


    $(document).ready(function(){
        // ADD CLASS TO MAIN MENU ITEM WHEN CHILD UL IS HOVERED //
        $("#menu-218-1 ul").hover( 
            function(){ $("li#menu-218-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-218-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-539-1 ul").hover( 
            function(){ $("li#menu-539-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-539-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-540-1 ul").hover( 
            function(){ $("li#menu-540-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-540-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-545-1 ul").hover( 
            function(){ $("li#menu-545-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-545-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-546-1 ul").hover( 
            function(){ $("li#menu-546-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-546-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-547-1 ul ").hover( 
            function(){ $("li#menu-547-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-547-1 a.sf-depth-1").removeClass('submenu_hover') }
        )

    });


})(jQuery, Drupal, this, this.document);

Here is my CSS:

.submenu_hover {
    background:  #888888 url(../images/arrow.png) no-repeat 97px 0px;
    border-left: #888888 solid 9999px;
    margin-left: -9999px;
} 

.lt-ie8 .submenu_hover {
    background:  #888888 url(../images/arrow.png) no-repeat 97px 0px;
    border-left: #888888 solid 9999px;
    margin-left: -960px;
}
share|improve this question
    
You can just give them a class and use $(this)/this to greatly reduce your code repitition –  ᾠῗᵲᄐᶌ Oct 19 '12 at 21:52

1 Answer 1

up vote 0 down vote

Try validating the both the aggregated and non-aggregated CSS. There could be a syntax error above the lines you show that causes them to be skipped.

And even though it seems to be CSS related, try adding semicolons after each .hover() call. The lack of may be tripping up the JS compressor. Technically in JS they are optional, but if compressing the JS is combining lines into one, the semicolons might be necessary.

And what wirey said is true - but adding a class may require php or using the menu attributes module.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.