West Wind Hero Image

Rick Strahl's Weblog

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All things Web
Contact   •   Articles   •   Products   •   Support   •  
Sponsored by:
Markdown Monster - The Markdown Editor for Windows
advertise here

:hover behavior in IE 7

May 13, 2008 • from Geneva, Switzerland • 12 comments
On this page:

I just got bitten by an issue with the :hover CSS element not working in a page where I'd been trying to highlight grid rows. It's really easy to create highlighted rows on hovering as in the following CSS:

#gdViewData tbody tr:hover
{ 
    background: orange url(images/lightorangegradient.png);
    cursor: pointer;
}

which makes for an easy way to create selectable rows. Hook up a click handler with jQuery (or an old style onclick attribute on the row) and you have a super easy picklist that looks nice and interactive:

highlight 

The jQuery selection .click() handler hookup then simply navigates:

$("#gdViewData tbody tr").click( function() {
    var id = $(this).attr("id").replace("gdViewData_","");        
    window.location = "AppletViewer.aspx?id=" + id;
});
 

:hover is breaky in IE

But... unfortunately when I tried this today it didn't work - at least not in IE 7. All other browsers - including IE 6 seem to properly render the row highlight but IE 7 doesn't.

As it turns out this was an error on my part as I somehow managed to wipe out my DOCTYPE document header in the HTML. When the doctype header is not present IE renders in quirks mode which doesn't properly support hover on elements other than anchor (<a>) tags.

There's more info on the issue along with a few links to documentation here and this is a known issue. IE doesn't render :hover tags properly unless it is in strict mode. This appears true - oddly enough - even for IE 8 which also didn't render the hover behavior with the document type header, which is surprising given that IE 8 supposed is running in strict mode to begin with.

In any case for ASP.NET developers this shouldn't be an issue since it creates the XHTML header by default for new pages. In my case I just accidentally wiped out the doctype header and didn't realize it until I found the solution mentioned above. Actually this accounts for a host of other problems I also had on the same page which now thankfully renders more consistently across browsers.

Just to be complete here's the transitional XHTML header I'm using that DOES show the hover behavior in IE 7a  and 8:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 

More Problems with Large Tables

In this particular application I'm working on we're generating some rather large lists in some cases. Basically the list we display is a dynamic user defined query and the result data is displayed as a table and scrolled rather than using paging. We still page, but only for very large page sizes (500-1000 pages actually) - otherwise the list is just rendered. Download performance (it's an intranet app with data coming off local servers) and rendering in the browser produces fairly quick responses.

However in IE 7 the hover behavior on large lists starts stuttering badly. If I have 50 rows or so the hover behavior tends to be fine, with hovering working quickly and smoothly. However with large lists that have more than a hundred items the hover highlight becomes horribly delayed. With 500 rows the (or smaller lists with wider column counts) the hover highlight shows up something like 2 seconds after actually hovering over an element which makes for an interesting selection experience <g>.

Other browsers show no problems even with the larger lists - again it's only in IE that that there's a problem. It's almost as if IE is literally attaching mouseenter and mouseout events to each row to provide the hover behavior and choking on the massive amounts of event handlers that are in place. In fact, earlier when I tried to figure a way around the IE non-hover problem I actually created a jQuery.hover() method hookup to simulate just that scenario and I saw EXACTLY the same behavior when doing so across all browsers. Same lag and horrible performance. <shrug>

That sucks. As a result we have to rethink the page size we can possibly display in our scrolling layouts. Unfortunately in this app seeing large results and browsing through them is a common scenario and we're already doing pre-filtering with filter fields, so there's not a lot more that can be done to reduce the result size.

But on the upside, since this is an internal app we're pushing for FireFox as the recommended platform - "Use IE at your own discomfort." <g>

Posted in: CSS  HTML  

The Voices of Reason

Ryan
May 13, 2008

# re: :hover behavior in IE 7

You got tr:hover to work in IE6? I thought it only worked in 7+ and that 6 was locked down to the lowly anchor tag. If a performant large-table-hover is a must, then I believe the only solution for IE6+7 is DHTML onmouseover and onmouseout events on the trs to set the appropriate className. Oh, and even then it's only fast in IE7 in quirks mode ;) You can't make this stuff up!
May 13, 2008

# re: :hover behavior in IE 7

Just in the last few days I've been struggaling with 'a' element backgrounds and 'ul' positioning in IE7. Everything else works fine across Vista and XP. Very frustrating indeed.
May 13, 2008

# re: :hover behavior in IE 7

Did you try using a hover class/javascript instead to compare performance?

$('#gdViewData tbody tr').hover(
   function(){
      $(this).addClass('hover');
   },
   function(){
      $(this).removeClass('hover');
   });
May 13, 2008

# re: :hover behavior in IE 7

Ricky,

I have tried the two approaches myself under IE7 (:hover vs. class toggling), and *both* are slow (for large tables).

I believe the slow highlighting is caused by IE7's slow modification of its internal DOM hierarchy, and the way it makes changes to the DOM and re-renders the page as a script runs. Whereas the IE team constantly takes extremely conservative approaches to its coding, in order to be sure nothing breaks for the lone IE4 user, Firefox/Mozilla can take more aggressive shortcuts to achieve better functionality with faster performance.

I have not found any way around the slow row-highlighting issue, and I have tried various approaches.

You can see one such table of mine here: http://www.lotterypost.com/vtracs-pick4-mirrors.aspx

I have a super-fast dual-quad core workstation, and it is still painfully slow to watch the highlight catch up with mouse movement over the table. (BTW, the zebra stripes on the table are rendered with a script just before the page load event takes place.)

The row highlighting in the page is currently done with tr:hover, but I tried the same exact table with toggling class via script, and the performance was visually identical.

BTW, for a dose of reality, try the same page using Firefox 3. ;-)
May 14, 2008

# re: :hover behavior in IE 7

I've had the exact same trouble on an application we're developing with a table that has very many columns (a calendar of sorts). The solution I chose was to introduce a short delay on the hover effect, so that it only highligths a cell (both horizontally and vertically in our case) when you leave the mouse hovering over it for a short amount of time. It's not perfect, but at least it "hides" the agonizingly slow performance of IE somewhat.
May 14, 2008

# re: :hover behavior in IE 7

Rick,

I am using IE behaviors for this purpose since a couple of years, and that works just fine for me. The above style declaration points to the behaviors script, the second (-moz .. ) declaration enables behaviors for the Foxpro browser ( from Dean Edwards at http://dean.edwards.name/moz-behaviors/ )

.tri 
{
    behavior: url(../scripts/gridselect.htc);
    -moz-binding: url(../scripts/bindings.xml#gridselect.htc);
}



<?xml version="1.0" encoding="ISO-8859-1"?>
<public:component xmlns:public="urn:gridselect" lightweight="true">


 <public:attach event="onmouseover" handler="DoMouseOver" />
 <public:attach event="onmouseout" handler="DoMouseOut" />
 <public:attach event="onclick" handler="DoClick" />


<script type="text/javascript">
//<![CDATA[

 function DoMouseOver() 
 {
    window.event.cancelBubble = true;
    element.style.backgroundColor="#333"; 
    element.style.color="#fff"; 
    element.style.cursor = "pointer"; 
 }

 function DoMouseOut() 
 {
    window.event.cancelBubble = true;
    element.style.backgroundColor=""; 
    element.style.cursor="default"; 
    element.style.color="";
 }
 function DoClick() 
 {
    window.event.cancelBubble = true;
       element.style.backgroundColor='red';
       LoadDetails(element.id);
 }

//]]>
</script>


</public:component>



Tom
May 29, 2008

# re: :hover behavior in IE 7

I just spent the past 2 hours trying to determine why a couple of hover attributes I had on a table cell weren't working in IE 7 or FireFox 2.

Your post solved my problem completely. In my case, I had a little garbage that was appearing before the doctype causing both IE 7 and Firefox to fall back to quirks mode.

Thanks!
March 24, 2009

# re: :hover behavior in IE 7

I got class toggling to work with large tables in IE 7 when I removed :hover from all style classes except for ones that applied specifically to anchors. Using it for anything else appears to attach mouseenter and mouseout events to everything on the page. To test this on your own page, remove all of your stylesheets and include only your highlighting styles on the page.

Now that I have upgraded to IE8, everything is slow again. Removing my stylesheet has no effect. Viewing the page in Compatibility View causes it to work fine. Back to the drawing table.
midix
August 30, 2009

# re: :hover behavior in IE 7

https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=391387&wa=wsignin1.0
someone has already sent a report on slow hovers.
and also this one:
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/045fdd68-328e-4399-8eae-4c68582d4224
October 21, 2009

# re: :hover behavior in IE 7

I was wondering the same as Ryan. How did you get :hover working on a table row in IE6? That's not possible (afaik)!
November 15, 2009

# re: :hover behavior in IE 7

I came across a similar issue with IE7 when using a large number of background images. After some searching it turned out to be because the background images were only 1px wide with repeat-x on them. IE7 just ground to a halt, with over a second for each hover and very high CPU when moving the mouse. The fix in my case was simple, expand the images to be 20 pixels wide so the total number of 'images' as seen by IE is reduced.

I have written a blog post about it for more info. http://bradleyrees.com/blog/index.php/performance-issue-with-ie7-backgrounds/

# re: :hover behavior in IE 7

Many thanks for the exciting blog posting! Simply put your blog post to my favorite blog list and will look forward for additional updates. Simply wanted to write down a word in order to say thanks to you for those wonderful tips.