IE Dropdown Problem in IE7 and 8

HTML & CSS
1

One of my sites (Outdoor Living) has a simple dropdown menu that buts a little <em> tag after the menu item. The text in this <em> tag is suppose to be small and italic.

It works in all browsers, and IE 9, but the text appears the same size as the menu item in IE 7 and 8. Any thoughts?

How it’s suppose to look:

How it looks in IE7 and IE8:

2

Hi,

I think it’s a javascript problem as IE isn’t recognising that there is an em in place. I assume you are grabbing the title text and appending it in em.

If I reproduce the page with the em added normally then it works as expected.

The developer tools in IE show the text you added as an empty text node (screenshot attached).

Do you want this moved to the javascript forum?

3

Ok, I found the error and you have a semi colon in the append routine ( .attr(‘title’); ) that shouldn’t be there (outdoor.js).

It should be like this:


$(document).ready(function(){
    
    // Activate Lightbox
    $('.lightbox').lightbox();
    
    // Store sub-menu title attr and append to link 
    $("#top nav ul ul li a").append(function(){
     [B] return '<em>' + $(this).attr('title') + '</em>';[/B]
    });
    
});