Question

I have a div with outline set using jQuery. It’s working fine in Chrome but not working in IE.

I know outline does not work in IE6 and IE7, but it’s also not working in IE8 and IE9.

I have a div FormContainer in which other div’s are placed when i click on a particular div I want to get it highlighted so on click I set focus of that div and handling focus event like this:

$('.FormContainer div').focus(function (e) {    
        if ($(e.target).hasClass('QuestionText') == false) {    
            $(this).css({ 'outline': 'black auto thin' });
            $(this).find('.buttonControl').show();    
            $(this).find('.buttonControl').css({ 'border': '1px solid black', 'border-bottom': 'none' });    
            $(this).addClass('FocusDiv');    
        }    
        e.stopImmediatePropagation();    
    });

All other css is working fine, but only $(this).css({ 'outline': 'black auto thin' }); is not working out. It’s working fine in Chrome but can’t get it work in IE8 and IE9.

Answer 1

This works in IE8:

$('div').css({'outline': '1px solid blue'});​

You can test it here:

http://jsfiddle.net/MCPHX/1/

Update
The part that IE doesn’t like is “auto” within the value for outline. So use black solid thin instead.

BTW, this is shorthand for {'outline-width': 'thin', 'outline-style': 'solid', 'outline-color': 'black'}

Standard accepted values for these properties can be found here: http://www.w3schools.com/css/css_outline.asp