Accordion's content panel spills out to the side in IE 6

There's not really anything we can do about IE 6's support for overflow.

I've fixed this by adding the following style:

.ui-accordion { overflow: hidden; }

that fixes the accordion's width. Then, in javascript, whenever the accordion's width changes, fix the .ui-accordion-content's width:

// where 'this' is .ui-accordion
$(this).find(".ui-accordion-content").each(function() {
    var $this = $(this);
    $this.width($this.parent().width() - ($this.outerWidth() - $this.width()));
});

Since you won't fix it, someone else might find this useful.

The reason we can't do that inside the widget is because this would break the fluid nature of the accordion.

Replying to [comment:3 scott.gonzalez]:

The reason we can't do that inside the widget is because this would break the fluid nature of the accordion.

I'm not certain what you mean by "fluid nature", but perhaps the following is more "fluid".

In IE 6 specific css (w/ conditional comment):

.ui-accordion
{
	overflow: hidden;
}
.ui-accordion-content
{
	width: expression($(this).parent().width() - $(this).data("trim"));
}

Then when you initialize accordion:

$("#sidenav").accordion({
	fillSpace: true,
	change: function(event, ui) {
		if ($.browser.msie && parseFloat($.browser.version) < 7.0) {
			ui.oldContent.css("overflow", "auto"); // fix for IE 6
		}
	},
	create: function() {
		if ($.browser.msie && parseFloat($.browser.version) < 7.0) {
			$(this).children(".ui-accordion-content").each(function() {
				var $this = $(this);
				$this.data("trim", $this.outerWidth() - $this.width());
			});
		}
	}
});

It uses IE specific expression and I know of its shortcomings but it seems to work fine in this case and I think it works out better than the alternative. I was surprised to see that jquery call works in css expressions but it does. I tried putting in the calculation itself - which would have eliminated the create handler - in the expression but when I do, IE hangs. I am guessing that something inside outerWidth() or width() puts IE in a loop.

Also, there seems to be a bug with the accordion control where in IE 6, the overflow value doesn't get reset to auto when switching tabs (#[ticket:6957]). The workaround I put in is, on change event, reset the overflow value.

By fluid I mean that the accordion always adjusts to the width of its container. Also, we can't use expressions as they rely on global variables.

Replying to [comment:5 scott.gonzalez]:

By fluid I mean that the accordion always adjusts to the width of its container. Also, we can't use expressions as they rely on global variables.

By global variables, do you mean the use of $.browser?

Expressions run in the global scope. Your expression references the global $ variable, which goes against our coding standards and breaks noConflict support.