Question

Below is the jQuery code I am attempting to use. It works well in Firefox, Opera, Chrome, Safari, but not IE7. I was at first suspicious that this was because of the :hidden selector not being supported in IE7, so I tried to simply .show() and .fadeIn() the element without conditions (you can see this from the commented out area).

 if (data.indexOf(error) == -1){
  alert('in result');
  if ( $('.result').is(":hidden") == true ){  
   alert('in fade in');
   $('.result').fadeIn('slow');
  }
  //$('.result').show('slow');
  $('.result span #entry').html(data);
  alert('entered data');

However this has not proven successful. Even without the selector conditional, I am still unable to get the element to appear in IE7. But I know it is interpreting the code because both ‘in result’ and ‘entered data’ alerts are thrown.

Here’s the XHTML

<div class='result'>
<img src='content/red-x.gif' alt='close' />
<span id='entry'></span>
</div>

And CSS

.result { 
 display: none;
 background: #c9fd9b;
 background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.51, rgb(201,253,155)),
    color-stop(0.85, rgb(217,245,191)),
    color-stop(0.24, rgb(193,240,149)),
    color-stop(0.11, rgb(177,222,136))
 );
 background: -moz-linear-gradient(
    center bottom,
    rgb(201,253,155) 51%,
    rgb(217,245,191) 85%,
    rgb(193,240,149) 24%,
    rgb(177,222,136) 11%));
 z-index: 22; 
 width: 255px;
 height: 155px;
 position: fixed;
 left: 50%;
 top: 65px; 
 overflow: hidden;
 padding: 10px;
 margin: 5px;
 margin-left: -127.5px;


 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;

 box-shadow: 2px 2px 10px #333333;
 -moz-box-shadow: 2px 2px 10px #333333;
 -webkit-box-shadow: 2px 2px 10px #333333; 
}

Answer 1

Just see by Developer toolbar in IE after the control is visible due to fade effect it is adding some code for opacity. Just remove the piece of code by writing

$(‘selector’).css(‘attribute’, ”);
or write
$(‘selector’).removeAttr(‘style’); // Removes all inline styles.

Hope this will help you 🙂