jQuery Corner Plugin on Floated Elements

The Corner Plugin for jQuery is a great little tool to take away the pain of rounding corners with CSS. I use it most frequently for dynamically rounded navigation tabs, a feature that most clients want. As opposed to aligning background-images in CSS2, or wrestling with border-radius in CSS3, with the Corner Plugin you can just command any page element to round itself automatically.

As with all things, though, the evil IE6 makes you look like a fool when Corner breaks everything on your painstakingly crafted layout. I’ve deduced that the main bug with IE is that when applied to floated elements without specified widths, IE corners them as if their widths were 100% of the parent container. So, if you have an unordered list of menu items that are floated left of right, it will look horrible. Unfortunately, this scenario is the most common implementation of menu tabs where the widths are entirely unpredictable.

The solution I discovered was apparent only after I diagnosed that undeclared widths were the root problem. With a little more jQuery, there’s an easy fix.

$(document).ready(function(){ 

	jQuery.each($('.nav ul li'), function() {
	    var width = $(this).width();
		$(this).css({ width:width });
	});

	$('.nav ul li').corner("3px");

});

Assuming that .nav ul li is something like your floated list, before applying the rounded corners assign each matched element a width. This bit uses the each() selector to go over each list item, measure its width, and then apply that width with CSS. Now, IE6 has a specified width for each element, and you can stop pulling out your hair follicles.

And this idea extends to many other IE problems … if things are ugly, give them explicit widths.