Jquery BlockUI Growl at bottom right

Question

I am using BlockUI for jquery to do a growl notification, I have it wired up and working but I want the notification to be at the bottom right not top right.

I modified the css to use bottom:10px but the growl is not rendering correctly. It begins at the bottom but streches half way up the page.

I have a JSfiddle here: http://jsfiddle.net/3wNFe/

with the following code

$(document).ready(function() {
$.blockUI({
            message: $('div.growlUI'),
            fadeIn: 700,
            fadeOut: 700,
            timeout: 2000,
            showOverlay: false,
            centerY: false,
            css: {
                width: '200px',
                bottom: '10px',
                left: '',
                right: '10px',
                border: 'non',
                padding: '5px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .6,
                color: '#fff'
            }
        });

});

EDIT - Solution I found the solution while using firebug, add

top: '',

to the css to make it render correctly.

Answer 1

The problem was that BlockUI was putting top percentage by default:

Try this:

$(document).ready(function() {
$.blockUI({
            message: $('div.growlUI'),
            fadeIn: 700,
            fadeOut: 700,
            timeout: 20000,
            showOverlay: false,
            centerY: false,
            css: {
                right: 0,
                bottom: 0,
                left: '',
                top: ''
            }
        });

});