5

I am fading out, and in a div:

$('.formErrors').fadeTo('fast', 0); 
$('.formErrors').fadeTo('slow', 1);

But when I do this in IE 8, it seems this bit of CSS:

.formErrors li { font-weight: bold; }

Is causing the text to come back quite distorted: (image below)

http://www.newmania.com/images/error.jpg

The HTML I am applying this to is:

<div class="formErrors">
There are errors in your submission. Please fix the following and try again:
<ul><li>Action is empty</li></ul>
</div>

It works fine in Firefox. Any ideas please?

Newmania
  • 662
  • 1
  • 12
  • 17

4 Answers4

10

A common solution is to define a background color, if you don't already have an image:
http://jsbin.com/axapa

.formErrors {background-color:white;}

Another option is to use fadeIn and fadeOut: the animation is till ugly, but at least it ends up nicely: http://jsbin.com/aboxa

Kobi
  • 135,331
  • 41
  • 252
  • 292
  • Thanks Kobi! The background colour solution works well. With fadeIn and fadeOut, the animation is more ugly than using the 2 fadeTo's, so I'll stick with them. Thanks for your help! – Newmania Dec 08 '09 at 09:57
  • +1 helped me solve an issue with `PNG` having ugly non transparent bg on IE8. Thanks! – Jakub Dec 21 '10 at 14:57
  • +1 for this solution again. Setting a background on my text div fixed this! Was stressing for a deadline too! Wish I could + some more ! :) – rowefx Apr 25 '13 at 12:36
2
jQuery.fn.fadeIn = function(speed, callback) { 
return this.animate({opacity: 'show'}, speed, function() { 
    if (jQuery.browser.msie)  
        this.style.removeAttribute('filter');  
    if (jQuery.isFunction(callback)) 
        callback();  
});
};
jQuery.fn.fadeOut = function(speed, callback) { 
return this.animate({opacity: 'hide'}, speed, function() { 
    if (jQuery.browser.msie)  
        this.style.removeAttribute('filter');  
    if (jQuery.isFunction(callback)) 
        callback();  
});
};
jQuery.fn.fadeTo = function(speed,to,callback) { 
return this.animate({opacity: to}, speed, function() { 
    if (to == 1 && jQuery.browser.msie)  
        this.style.removeAttribute('filter');  
    if (jQuery.isFunction(callback)) 
        callback();  
});
};

This code will override some fade properties in JQuery specific to IE. I was able to successfully get fadeTo to work properly in IE here: https://app.tekstme.com/signup/

Jeff
  • 21
  • 2
2

I know this thread is really old but i found a simple solution. Using background was not applicable for my case because i had a complex background behind text whose background had to be transparent. Anyway I found this one working pretty well (css code to add):

.formErrors{position:relative;}
Luka Vidaković
  • 21
  • 1
1

Using <!DOCTYPE html> fixed this issue for me in IE8. The text still looks blocky during the fade but afterwards it smoothes out

user96813
  • 11
  • 1