jQuery modal, setting cursors on resizable: false

Just started to refactor the modal dialogs in our new UI and have decided to use jQuery. The modal UI widgets are really nice and give you dragging and resizing by default. Getting my styles integrated with the jQuery dialogs wasn’t exactly trivial but after a bit of wrangling I got it done. The jQuery theme roller was actually quite helpful in coming up with the final solution but I ran into a styling issue with the jQuery modal dialogs. One of note is the cursors when setting resizable: false in the jQuery modals. When you set resizable to false

 .dialog({
    width: 600,
    height: 180,
    resizable: false,
    modal: true,
    title: "Modal Title",
    overlay: {
        opacity: 0.5,
        background: "white"
    	}
    });

the modal becomes (as expected) non-resizable, but the cursors still act as if the modal is resizable when you mouse over the edges on the modal. Fortunately when you set resizable: false on the jQuery modal the class name .ui-resizable-disabled is appended to the modal css class attribute. Using css I could then set the cursors back to default like this.

.ui-resizable-disabled .ui-resizable-handle {
	cursor: default;
  }

Unfortunately jQuery inlines the styles directly on the div elements attached to the modal so my css settings were overridden. After a bit of digging I remembered I could use the !important attribute to force the UI to recognize my css property.

.ui-resizable-disabled .ui-resizable-handle {
	cursor: default !important;
}

IE6 ignores !important though so I may end up having to modify the jQuery UI modal source itself to support IE6, oh well, we’ll see.