Re: Background is not visible until hovering on element in I
Hi, I was able to resolve the same problem you describe in my own site. For me, the problem was with Typekit rendering web fonts and that conflicting with PIE. To fix, you will need to use jQuery to detect the browser, and in IE8 and older, wait until the DOM is loaded to fire Typekit (or your web font rendering engine).
Code:
<script type="text/javascript" src="http://use.typekit.com/TYPEKITID.js"></script>
<script type="text/javascript">if ($.browser.msie && $.browser.version==8) { $(window).load(function() { try{Typekit.load();}catch(e){}}); } else { try{Typekit.load();}catch(e){} }</script>
Looking at your source, you are using web fonts but does not appear to be Typekit. Either way, wrap the JavaScript with the browser detection:
Code:
<script type="text/javascript">if ($.browser.msie && $.browser.version==8) { $(window).load(function() { /**YOUR JS HERE**/ }); } else { /**YOUR JS HERE AGAIN**/ }</script>
If you happen to be using the latest version of jQuery, they've done away with $.browser. You can get it back with this jQuery function:
Code:
(function( jQuery, window, undefined ) {
"use strict";
var matched, browser;
jQuery.uaMatch = function( ua ) {
ua = ua.toLowerCase();
var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[];
return {
browser: match[ 1 ] || "",
version: match[ 2 ] || "0"
};
};
matched = jQuery.uaMatch( navigator.userAgent );
browser = {};
if ( matched.browser ) {
browser[ matched.browser ] = true;
browser.version = matched.version;
}
// Chrome is Webkit, but Webkit is also Safari.
if ( browser.chrome ) {
browser.webkit = true;
} else if ( browser.webkit ) {
browser.safari = true;
}
jQuery.browser = browser;
})( jQuery, window );
Hope this is helpful
Forums
