IE css problem or jquery ui problem? weird cursor while showing custom nested rows.

I hope you can help me on this one.

Here's a simplified version of my row object. Nothing special: a button, a title, and a content that slides down when the button is pressed.

var row = function(title)
{
    this.clear = $('<div/>').css({clear: 'both'});
    this.$icon = $('<div/>').addClass('ui-icon ui-icon-carat-1-s');
    this.$button = $('<div/>').addClass('ui-state-default').append(this.$icon).css({float: 'left', cursor: 'pointer'});
    this.$button.data('$', this).click(function() 
    {
        if ($(this).data('$').$content.is(':hidden')) { $(this).data('$').$content.slideDown(500); } 
        else { $(this).data('$').$content.slideUp(500); }
    });
    this.$title = $('<div/>').append(title).css({float: 'left'});
    this.$deployer = $('<div/>').css({float: 'left'}).append(this.$button).append(this.$title).append(this.clear.clone());
    this.$content = $('<div/>').hide();
    this.$ = $('<div/>').append(this.$deployer).append(this.clear.clone()).append(this.$content);
}

You can try it (I'm using jquery 1.4.2 and jquery-ui 1.8.4 with custom theme):

var cheersRow = new row('cheers');
cheersRow.$content.append('and beers');

$(document.body).append(cheersRow.$);

The problem comes when nesting a row object in the content of another. Like this:

var andRow = new row('and');
andRow.$content.append('beers');

var cheersRow = new row('cheers');
cheersRow.$content.append(andRow.$);

$(document.body).append(cheersRow.$);

This actually works, but there's a problem in IE6. If you try, you will see that after clicking the button, the cursor changes from cursor:pointer to cursor:default and then starts flashing cursor:progress until sliding is finished.After the slide is finished, cursor keeps default unless you move it.

This is not acceptable :3

There is a little clue I managed to discover. If you remove the background-image set in this.$icon.ui-icon-carat-1-s and this.$button.ui-state-default, this weird behaviour disappears.

You can try it adding this to row object:

    this.$icon.css({backgroundImage: 'none'});
    this.$button.css({backgroundImage: 'none'});

It only works if you remove both background-image, the problem keeps if you only remove one of them.

Anybody has a clue? I've banging my head for hours on this.

PD: for those who always rely on doctype, this is the one that's being used:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;

ansaurus

tags:

views:

answers:

IE css problem or jquery ui problem? weird cursor while showing custom nested rows.

related questions