Forums
View unanswered posts | View active topics It is currently Wed Jul 30, 2014 11:12 am



Reply to topic  [ 6 posts ] 
 Background is not visible until hovering on element in IE7 
Author Message

Joined: Thu May 16, 2013 12:46 pm
Posts: 3
Post Background is not visible until hovering on element in IE7
I am using PIE 2.0 beta, primarily to get border-radius styles working in IE7 and IE8. I have position: relative specified on my button elements as recommended by the z-index known issue FAQ.

In IE8, everything seems to work just fine.

In IE7 (and IE8 in Compatibility mode), it seems that sometimes (often) the background is 'hidden' until you hover on the element, and then it pops into view (and sticks around). I use both <a> and <input> elements for my buttons, and the issue seems to affect both.

One example is at https://www.cellartracker.com/adduser.asp. In the bottom right, there should be a big red button that says "Submit and Create My Account". In IE7, you don't see the button or the text (since without the background, you have white text on a white page). If you hover the mouse over the space where the button should be, the background pops into view.

I'm sure it's something simple I'm missing -- any ideas?

Thanks,
Dan


Thu May 16, 2013 12:53 pm
Profile

Joined: Thu May 16, 2013 12:46 pm
Posts: 3
Post Re: Background is not visible until hovering on element in I
Jason, any thoughts on this one?


Thu Jun 20, 2013 10:45 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Background is not visible until hovering on element in I
I don't have time to look into this at the moment, but perhaps -pie-poll would help?


Sat Jun 22, 2013 11:36 am
Profile

Joined: Fri Jul 26, 2013 3:35 pm
Posts: 2
Location: Duluth, Minnesota
Post 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 :D


Fri Jul 26, 2013 3:40 pm
Profile WWW

Joined: Fri Jul 26, 2013 3:35 pm
Posts: 2
Location: Duluth, Minnesota
Post Re: Background is not visible until hovering on element in I
Just another note that I *did* add pie-poll as Jason suggested, not sure whether this had any helpful impact - the true fix was firing Typekit after the DOM loaded, but you may want to experiment with adding this CSS declaration to the affected elements:

Code:
   -pie-poll:true;


Fri Jul 26, 2013 3:42 pm
Profile WWW

Joined: Thu May 16, 2013 12:46 pm
Posts: 3
Post Re: Background is not visible until hovering on element in I
Thanks for the feedback! Just to test, I tried fully removing my webfont script from the page, but I didn't notice any difference in the issue here. I'm not using the web fonts on the buttons in question -- perhaps that's the difference between our scenarios?


Tue Aug 13, 2013 10:52 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 6 posts ] 

Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.