An IE6-compatible solution for :hover

Something I like to incorporate on web sites with tables is automatic background highlighting of the row that the mouse is hovering over. This is easy to do with CSS:

table.hover tr:hover
{
	background-color:#ffffcc;
}

All you need to do is give your table tag the hover class, and your mouseover hover background color works!

In all browsers except IE6, of course. IE6 only supports the :hover pseudo-class on anchor () tags. (There’s lots of other things that IE doesn’t support or supports wrong, but that’s a story for another day.)

How can we get IE6 to hover our table rows? By using a little JavaScript and the Prototype library. Our solution requires two steps:

  1. Write some code to automatically detect mouseover and mouseout events on table rows, applying and removing a CSS class to the rows as the events occur.
  2. Add the CSS class to our CSS file.

First we’ll add a tr.hover declaration to our CSS.

table.hover tr:hover, table.hover tr.hover
{
	background-color:#ffffcc;
}

Notice that I kept the table.hover parent selector; this is important, as we’ll use that to ensure we only apply our hover code to table rows in tables that have the hover class.1

To get the class added (and removed) from our table rows, we use Prototype to find all elements that match the CSS selector table.hover tr, and for each one, hook a function to the onmouseover and onmouseout properties.

		$$('table.hover tr').each( function(e) {
			e.onmouseover += function() {
				Element.addClassName(e, 'hover');
			};
			e.onmouseout += function() {
				Element.removeClassName(e, 'hover');
			}
		});

Problem #1: The code above is applied to all browsers. We only need it applied to versions of IE prior to 6.0. A simple hack for this was found at Ajaxian, and is added below.

	if (!window.XMLHttpRequest) 
	{
		$$('table.hover tr').each( function(e) {
			e.onmouseover += function()
			{
				Element.addClassName(e, 'hover');
			};
			e.onmouseout += function()
			{
				Element.removeClassName(e, 'hover');
			}
		});
	}

Problem #2: What if our event model already declared an event on the onmouseover or onmouseout properties? The script above would clear any existing event handlers. The solution is to use Prototype’s Event.observe method to hook the functions.

	if (!window.XMLHttpRequest) 
	{
		$$('table.hover tr').each( function(e) {
			Event.observe(e, 'mouseover', function() {
				Element.addClassName(e, 'hover');
			});
			Event.observe(e, 'mouseout', function() {
				Element.removeClassName(e, 'hover');
			});
		});
	}

Problem #3: If the JavaScript runs before the page loads, it may not apply the event handlers to our table. This is also resolved by using Event.observe to run the above code only after the window loads.

if (!window.XMLHttpRequest) 
{
	Event.observe(window, 'load', function() {
		$$('table.hover tr').each( function(e) {
			Event.observe(e, 'mouseover', function() {
				Element.addClassName(e, 'hover');
			});
			Event.observe(e, 'mouseout', function() {
				Element.removeClassName(e, 'hover');
			});
		)};
	)};
}

There you have it — a :hover hack for IE6 that doesn’t break IE7 or Firefox. It should work with all other modern browsers, though some old browsers may have issues with it. If you know of any browsers which break with this solution, let me know.


1 The use of the class name hover caused a problem when including YUI’s Button CSS code. In their CSS, they have a CSS selector for .yuibutton.hover. Apparently, IE6’s issue with these selectors caused my entire table to pick up the CSS from .yuibutton.hover. To fix this, I renamed YUI’s CSS selector to .yuibutton.yuihover and updated their JavaScript (just search/replace 'hover' with 'yuihover').

Customizing TableKit to stripe column groups

I’m a big fan of TableKit, a JavaScript library (based on Prototype) that provides client-side sorting, row striping, column resizing, and more. (Check out their demo to see more.) There’s one feature I needed on a recent project that was missing: the ability to stripe column groups (defined with the colgroup tag) with alternating background colors (as you would stripe rows of alternating colors). It was easy to add this functionality to TableKit by adding the following JavaScript code to the TableKit library.

TableKit.ColGroups = {
	stripe : function(table) {
		var colgroups = table.getElementsBySelector('colgroup');
		colgroups.each(function(cg,i) {
			TableKit.ColGroups.addStripeClass(table,cg,i);
		});
	},
	addStripeClass : function(t,cg,i) {
		t = t || cg.up('table');
		var op = TableKit.option('colgroupEvenClass colgroupOddClass', t.id);
		$(cg).removeClassName(op[0]).removeClassName(op[1]).addClassName(
			((i+1)%2 === 0 ? op[0] : op[1]));
	},
	hide : function(colgroup) {
		Element.setStyle(colgroup,{visibility:'collapse'});
	}
};

The code above expects two new TableKit options, named colgroupEvenClass and colgroupOddClass. To add those as available options to TableKit, find the section of code below and add the two lines named colgroupEvenClass and colgroupOddClass.

	...
	options : {
		autoLoad : true,
		stripe : true,
		sortable : true,
		resizable : true,
		editable : true,
		rowEvenClass : 'roweven',
		rowOddClass : 'rowodd',
		sortableSelector : ['table.sortable'],
		columnClass : 'sortcol',
		descendingClass : 'sortdesc',
		ascendingClass : 'sortasc',
		noSortClass : 'nosort',
		sortFirstAscendingClass : 'sortfirstasc',
		sortFirstDecendingClass : 'sortfirstdesc',
		resizableSelector : ['table.resizable'],
		minWidth : 10,
		showHandle : true,
		resizeOnHandleClass : 'resize-handle-active',
		editableSelector : ['table.editable'],
		formClassName : 'editable-cell-form',
		noEditClass : 'noedit',
		editAjaxURI : '/',
		editAjaxOptions : {},
		colgroupEvenClass : 'colgroupeven',
		colgroupOddClass : 'colgroupodd'
	},
	...

With that, you can now stripe your column groups by doing the following. The example below assumes a table whose id is mytable.

TableKit.ColGroups.stripe($('mytable'));

That command will apply two classes to your colgroup tags — by default, colgroupEven and colgroupOdd. Most modern browsers will pass down the background color for a colgroup to its table cells, "striping" your column groups.

IE7 reverses table rows during Insertion.After

I found yet another interesting bug in IE7, related to using Prototype‘s Insertion.After command to insert additional table rows into an existing table. Apparently, IE7 will reverse the order of the table rows being inserted. As a proof of concept, I’ve set up an ie7 table insert bug test page to prove my point.

Here’s how to duplicate this bug.

  1. Create a new web page (we’ll call it test.htm).
  2. Create a <table> and add a few rows.
  3. Give one row a specific id (such as id="insertAfterThis").
  4. Create a separate web page (call it testdata.htm) with more table rows — just the <tr>...</tr>, nothing else.
  5. Add the following JavaScript to run after the window loads:
    new Ajax.Request('testdata.htm', { method:'get', onSuccess:function(transport) { new Insertion.After('insertAfterThis', transport.responseText); } });
  6. Load the test.htm page in Firefox, and see how the rows are inserted in the order they exist in the testdata.htm file.
  7. Load the test.htm page in IE, and see how the order of the rows is reversed.

It’s quite a frustrating bug, because there’s apparently only two ways to work around it:

  1. Figure out a way to add markup that forces IE to add the rows correctly.
    OR
  2. Have IE receive the table rows from your Ajax call in reverse order (so it’ll reverse it again into the correct order).

Considering we’re not even sure if #1 is possible, it’s a very frustrating bug. Some may say it’s a bug with the Prototype library, but I doubt it, since Prototype is simply inserting text — it has no idea there’s a table involved. IE7 reveals yet another illogical bug.

Microsoft OKs community development of CSS Friendly Control Adapters

Back in late 2006, I modified Microsoft’s CSS Friendly ASP.Net 2.0 Control Adapters to be distributable as a single DLL. Since that time, the code I wrote was downloaded from this web site, and everything seemed good, at least until the server crashed. After being prodded by a few people in the ASP.Net community, I moved this little project over to CodePlex. Before doing so, I checked to make sure this was OK with Scott Guthrie, the grand poohbah of ASP.Net at Microsoft. (You’ve got to cover your basis!)

Anyway, today I read a post on the ASP.Net forums stating that Microsoft OKs community development of the CSS Friendly Control Adapters. In short, this is a good thing for the users of this product, for reasons that are explained in that thread, and it looks like I’ll be more involved with the ongoing development of these adapters in the future. It’s also nice to see your efforts noticed by the largest software development company in the world. 😉

I will keep the pages on this site that mentioned these adapters, but I highly suggest everyone who used them to bookmark the CodePlex project “CSSFriendly” and use that as their source of code and information going forward.

Simple rounded corners

A friend of mine was trying to get a rounded corner bar at the top of some web content. He already had the rounded corner images but didn’t know the HTML and CSS markup. I sent him over the following snippet of code as an example:

    <div style="width:100%;background-color:blue;height:14px;margin:0px;padding:0px;font-size:5%;">
        <div style="float:left;background-image:url('left.gif');width:14px;height:14px;">
        </div>
        <div style="float:right;background-image:url('right.gif');width:14px;height:14px;">
        </div>
    </div>

To understand, note the following:

  • The width:100% should be set the width appropriate to your content.
  • The width and height (14px in the example above) should be replaced by the actual width and height of your rounded corner images.
  • What’s with the font-size:5%? Making the font size very small will ensure that any white space will not create a block larger than the desired height (in our case, 14px).

The following bar was made using the above content, using images from this web site.